jquery 树形折叠菜单
<style type="text/css"> *{ padding:0; margin:0; border:0;} ul,li{ list-style:none;} body{ width:1000px; margin:6px auto; font-size:13px; line-height:18px;} #typebox{width:300px; border:1px solid #000; line-height:0;} #typebox .treeNode{ display:block;} #typebox .treeNode img{vertical-align:middle; border:0;} #typebox .treeNode a{padding: 0px 3px 0px 3px; text-decoration:none; cursor:auto; color:#666;} #typebox .dTree{ display:none;} #typebox .dTree.db{ display:block;} #typebox .dTree img{ vertical-align:middle; border:0;} #typebox .dTree a{padding: 0px 2px 0px 2px; text-decoration:none; cursor:auto; color:#666;} #typebox .dTree a:hover{ text-decoration:underline;} </style>
<script type="text/javascript"> $(function(){ $(".treeNode").click(function(){ //$(this).children("img").attr("src", "img/minus.gif"); $(this).next().toggleClass("db");//将当前点击的树的子菜单显示 $(this).children("img").attr("src", ($(this).next().is(":hidden") ? "img/plus.gif" : "img/minus.gif"));//当子菜单隐藏时,树的“——”号变成“+”号,当子菜单显示时,加号变成减号 //$(this).next().is(":hidden") ? "img/plus.gif" : "img/minus.gif")用来判断子菜单是否隐藏,如果隐藏,就将图片改成加号,如果显示,把图片改成减号 /*if($(this).next().is(":hidden")) { alert("hidden"); } else { alert("show"); }*/ }); }); </script>
<div id="typebox"> <div class="treeNode"> <img src="img/plus.gif" alt="" /><a href="#" title="">核心</a> </div> <ul class="dTree"> <li><img src="img/line.gif" alt="" /><img src="img/join.gif" /><a href="http://www.baidu.com" target="_blank" title="">each</a></li> <li><img src="img/line.gif" alt="" /><img src="img/join.gif" /><a href="#" title="">size</a></li> <li><img src="img/line.gif" alt="" /><img src="img/join.gif" /><a href="#" title="">length</a></li> <li><img src="img/line.gif" alt="" /><img src="img/joinbottom.gif" /><a href="#" title="">selector</a></li> </ul> <div class="treeNode"> <img src="img/plus.gif" alt="" /><a href="#" title="">属性</a> </div> <ul class="dTree"> <li><img src="img/line.gif" alt="" /><img src="img/join.gif" /><a href="#" title="">each</a></li> <li><img src="img/line.gif" alt="" /><img src="img/join.gif" /><a href="#" title="">size</a></li> <li><img src="img/line.gif" alt="" /><img src="img/join.gif" /><a href="#" title="">length</a></li> <li><img src="img/line.gif" alt="" /><img src="img/joinbottom.gif" /><a href="#" title="">selector</a></li> </ul> <div class="treeNode"> <img src="img/plus.gif" alt="" /><a href="#" title="">选择器</a> </div> <ul class="dTree"> <li><img src="img/line.gif" alt="" /><img src="img/join.gif" /><a href="#" title="">each</a></li> <li><img src="img/line.gif" alt="" /><img src="img/join.gif" /><a href="#" title="">size</a></li> <li><img src="img/line.gif" alt="" /><img src="img/join.gif" /><a href="#" title="">length</a></li> <li><img src="img/joinbottom.gif" alt="" /><img src="img/joinbottom.gif" /><a href="#" title="">selector</a></li> </ul> </div>
参考图片:empty.gif(是一张空白的图片)
join.gif
joinbottom.gif
line.gif
minus.gif
plus.gif