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

Question

我使用此网页设计了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> 

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

Answer 1

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;

Answer 2

最终，我找到了解决方案。（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>