如何实现树状结构导航条css+javascript？
要做一个可以展开折叠的树状导航条，到网上看了一些实现，感觉都比较麻烦，js的代码量都不小，我的应用要求不复杂，但是要求树状结构的内容是可以改变的 。所以最后还是自己试着写了一个。 下面是演示代码，你可以按照自己的需求改变div中的内容，动态的生成div部分代码就可以实现tree结构的动态建立。 <html> <script> function changevisible(element){ var children = element.parentNode.childNodes; for(var i= 0; i<children.length;i++){ if(children[i].nodeName == "DIV"){ var className = children[i].className; if(className == "show"){ element.className="fold"; children[i].className="hidden"; } else{ element.className="expend"; children[i].className="show"; } } } } </script> <style type="text/css"> div.show{ display:block; width:100%; background-color:#339966; } div.hidden{ display:none; } span.fold{ width:20px; height:20px; padding:0px 10px 0px 10px; background-image:url("P1.gif"); background-repeat:no-repeat; } span.expend{ width:20px; height:20px; padding:0px 10px 0px 10px; background-image:url("M1.gif"); background-repeat:no-repeat; } span.2blank{ width:20px; } span.3blank{ width:40px; } span.def{ width:20px; height:20px; padding:0px 10px 0px 10px; background-image:url("D.gif"); background-repeat:no-repeat; } </style> <body> <div id="sidenav"> <div class="show"><span class="fold" onclick="changevisible(this)"> </span>10 <div class="hidden"><span class="2blank"> </span><span class="fold" onclick="changevisible(this)"> </span>20</div> <div class="hidden"><span class="2blank"> </span><span class="fold" onclick="changevisible(this)"> </span>21</div> <div class="hidden"><span class="2blank"> </span><span class="fold" onclick="changevisible(this)"> </span>22 <div class="hidden"><span class="3blank"> </span><span class="def"> </span>30</div> <div class="hidden"><span class="3blank"> </span><span class="def"> </span>31</div> </div> </div> </div> </body> </html> 下面是效果演示：如何实现树状结构导航条css+javascript？
相关文章列表