jQuery树视图中的展开和折叠图标在树中不显示

expand and collapse icon in jQuery tree view is not shown in tree

本文关键字：图标折叠显示视图 jQuery 更新时间：2023-09-26

我用jQuery设计了这个网页的树视图。我稍微修改了一下代码。我删除了'div class="tree" '的内容，并添加了如下内容。

<div class="tree">
		
   <ul id="list">
		
        <div id="1">
	    <li id="li_1"><a>2015/01/01 08:00:00</a>
	    	<ul id="ul_1">
                <div id="1_1"><li id="start"><a>2015/01/01 08:10:05 </a></li></div>
                <div id="1_2"><li id="T"><a>2015/01/01 08:15:10</a></li></div>
                <div id="1_3"><li id="start"><a>2015/01/01 08:27:15</a></li></div>
                <div id="1_4"><li id="F"><a>2015/01/01 08:39:20</a></li></div>
                <div id="1_5"><li id="start"><a>2015/01/01 08:46:25</a></li></div>
                <div id="1_6"><li id="F"><a>2015/01/01 08:55:30</a></li></div>
	    	</ul>
	    </li>
        </div> 
        
        <div id="2">
	     <li id="li_2"><a>2015/01/01 10:20:00 </a>
	     	<ul id="ul_2">
             <div id="2_1"><li id="start"><a>2015/01/01 10:28:09</a></li></div>
             <div id="2_2"><li id="F"><a>2015/01/01 10:37:20</a></li></div>
             <div id="2_3"><li id="start"><a>2015/01/01 10:45:13</a></li></div>
             <div id="2_4"><li id="F"><a>2015/01/01 10:48:26</a></li></div>
             <div id="2_5"><li id="start"><a>2015/01/01 10:57:54</a></li></div>
             <div id="2_6"><li id="T"><a>2015/01/01 11:12:00</a></li></div>
             <div id="2_7"><li id="start"><a>2015/01/01 11:20:09</a></li></div>
             <div id="2_8"><li id="F"><a>2015/01/01 11:28:12</a></li></div>
	     	</ul>
	     </li>
        </div>
     </ul>
  </div>

树视图工作成功。但是没有显示展开/折叠图标(正负图标)。我哪里错了?谢谢你的建议。

css在ul的li下查找锚，但你在那里插入了div。这就是为什么它没有显示图标

.tree > ul > li > a {
color: #3B4C56;
display: block;
font-weight: normal;
position: relative;
text-decoration: none

图标的类>>

.tree li.parent > a:before {
background-image: url("../images/plus_minus_icons.png");
background-position: 25px center;
content: "";
display: block;
height: 21px;
left: 0;
position: absolute;
top: 2px;
vertical-align: middle;
width: 23px;

我终于找到了解决办法。(Nishith Chaturvedi的建议对我构建这个答案很有帮助。)首先，我再次更改了更改代码，如下所示…:)

.tree > .listClass > .testSuite > .testSuite_branch >a {
    color: #3B4C56;
    display: block;
    font-weight: normal;
    position: relative;
    text-decoration: none;
}
.tree > .listClass > .testSuite > .testSuite_branch >a:before {
    background-image: url("../images/plus_minus_icons.png"); 
    background-position: 25px center;
     content: ""; 
    display: block;
    height: 21px;
    left: 0;
    position: absolute;
    top: 2px;
    vertical-align: middle;
    width: 23px;
}

<div class="tree">
		
   <ul id="list" class="listClass">
		
	   <div tabindex="-1" id="1" class="testSuite">
	    <li id="li_1" class="testSuite_branch"><a>2015/01/01 08:00:00 </a>
	    	<ul id="ul_1">
                <div id="1_1"><li id="start"><a>2015/01/01 08:10:05</a></li></div>
                <div id="1_2"><li id="T"><a>2015/01/01 08:15:10</a></li></div>
                <div id="1_3"><li id="start"><a>2015/01/01 08:27:1</a></li></div>
                <div id="1_4"><li id="F"><a>2015/01/01 08:39:2</a></li></div>
                <div id="1_5"><li id="start"><a>2015/01/01 08:46:25</a></li></div>
                <div id="1_6"><li id="F"><a>2015/01/01 08:55:30</a></li></div>
	    	</ul>
	    </li>
        </div> 
     </ul>
  </div>