<div class="codetitle"> <span><a style="CURSOR: pointer" data="20939" class="copybut" id="copybut20939" onclick="doCopy('code20939')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code20939"> <br> <br> <br> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br><title>tree</title> <br><link href="css/style.css" rel="stylesheet" type="text/css"> <br><style type="text/css"> <BR>.node ul{ <BR>margin-left:20px; <BR>} <BR>.node .node{ <BR>display:none; <BR>} <BR>.node .tree{ <BR>height:24px; <BR>line-height:24px; <BR>} <BR>.ce_ceng_close{ <BR>background:url(images/cd_zd1.png) left center no-repeat; <BR>padding-left: 15px; <BR>} <BR>.ce_ceng_open{ <BR>background:url(images/cd_zd.png) left center no-repeat; <BR>} <BR></style> <br><script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <br> <br><br> <br><div class="cd_zj_l"> <br><br><br><div class="cd_title">目录导航</div> <br><div class="cv_fcv node"> <br><div class="tree">哲学、宗教</div> <br><ul class="node"> <br><li> <br><div class="tree">哲学伦理</div> <br><ul class="node"> <br><li> <br><div class="tree">马克思主义哲学</div> <br><div class="tree">马克思主义哲学</div> <br><div class="tree">马克思主义哲学</div> <br><div class="tree">马克思主义哲学</div> <br> </li> <br><div style="clear:both"></div> <br> </ul> <br><br> </li> <br><div style="clear:both"></div> <br> </ul> <br><div class="tree">哲学、宗教</div> <br><ul class="node"> <br><li> <br><div class="tree">哲学伦理</div> <br><ul class="node"> <br><li> <br><div class="tree">马克思主义哲学</div> <br><div class="tree">马克思主义哲学</div> <br><div class="tree">马克思主义哲学</div> <br><div class="tree">马克思主义哲学</div> <br> </li> <br> </ul> <br> </li> <br> </ul> <br> </div> <br> </div> <br><script type="text/javascript"> <BR>$(".tree").each(function(index, element) { <BR>if($(this).next(".node").length>0){ <BR>$(this).addClass("ce_ceng_close"); <BR>} <BR>}); <BR>$(".tree").click(function(e){ <BR>var ul = $(this).next(".node"); <BR>if(ul.css("display")=="none"){ <BR>ul.slideDown(); <BR>$(this).addClass("ce_ceng_open"); <BR>ul.find(".ce_ceng_close").removeClass("ce_ceng_open"); <BR>}else{ <BR>ul.slideUp(); <BR>$(this).removeClass("ce_ceng_open"); <BR>ul.find(".node").slideUp(); <BR>ul.find(".ce_ceng_close").removeClass("ce_ceng_open"); <BR>} <BR>}); <BR></script> <br> <br> <br> </div> <br>使用js简单实现了树菜单！相信自己你一定可以实现的更好！ <br><br>实现的效果图 <br><img src="http://files.jb51.net/file_images/article/201311/201311201536262.gif?20131020153643" alt="使用js简单实现了tree树菜单_javascript技巧" >
