<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><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <BR><html xmlns="http://www.w3.org/1999/xhtml"> <br> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><title>ツリー</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>高さ:24px; <br>行の高さ:24px; <br>} <br>.ce_ceng_close{ <br>background:url(images/cd_zd1.png) 左中央 リピートなし; <br>パディング左: 15px; <br>} <br>.ce_ceng_open{ <br>background:url(images/cd_zd.png) 左中央 リピートなし; <br>} <br></style> <br><script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <br></head> <br><br> <br><div class="cd_zj_l"> <br><br><br><div class="cd_title">目录导航</div> <br><div class="cv_fcv ノード"> <br><div class="tree">哲学、宗教</div> <br><ul class="node"> <br><li> <br><div class="tree">哲学伦理</div> <br><ul class="node"> <br> </li> <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> <br><br></li> <br><div style="clear:both"></div> <br> <br><div class="tree">哲学、宗教</div> <br><ul class="node"> <br> </li> <li> <br><div class="tree">哲学伦理</div> <br><ul class="node"> <br> </li> <li> <br><div class="tree">马克思主义哲学</div> <br><div class="tree">马克思主义哲学</div> <br><div class="tree">马克思主义哲学</div> <br><div class="tree">马克思主义哲学</div> <br></li> <br> <br></li> <br> <br> </li> </div> <br> <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(".node").slideUp(); >ul.find(".ce_ceng_close").removeClass("ce_ceng_open"); <br>} <br>}); <br></script> <br></body> <br></html> <br><br> <br>usejs简单实现了树菜单！相信自己你一定可实现的更好！ <br>实现的效果图 <br><br>
