Question

我使用this网页设计了jQuery树视图。我更改了这些代码。我删除了＆＃39;的内容。 div class =＆＃34; tree＆＃34; ＆＃39;并添加其内容如下。

＆＃13;

<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>

＆＃13;

树视图已成功运行。但是没有显示展开/折叠图标（plus_minus图标）。我错在哪里？谢谢你的建议。

Answer 1

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

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

icon＆＃39; s class＆gt;＆gt;

.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;

Answer 2

最后我找到了解决方案。（Nishith Chaturvedi的建议对我建立这个答案很有帮助。）首先，我再次更改了更改代码，如下所示.. :)

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: