首页 > 代码库 > JQuery树形目录制作
JQuery树形目录制作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script></head><body><style type="text/css"> .menu{width:300px;} .has_children{background:#555; color:#fff; cursor:pointer;} .highlight{color:#fff; background:green;} .div{padding:0px; margin:10px 0px;} div a{background:#888; display:none; float:left; width:300px;}</style> <div class="menu"> <div class="has_children"> <span>第一章－认识 JQuery</span> <a>1.1－Javascript和Javascript库</a> <a>1.2－加入Jquery代码</a> <a>1.3－编写简单的JQUERY代码</a> <a>1.4－JQUERY对象和其他库的冲突</a> <a>1.5－JQUERY对象和DOM对象</a> <a>1.6－JQUERY开发工具和插件</a> <a>1.7－小结</a> </div> <div class="has_children"> <span>第二章－认识 JQuery</span> <a>12.1－Javascript和Javascript库</a> <a>12.2－加入Jquery代码</a> <a>12.3－编写简单的JQUERY代码</a> <a>12.4－JQUERY对象和其他库的冲突</a> <a>12.5－JQUERY对象和DOM对象</a> <a>12.6－JQUERY开发工具和插件</a> <a>12.7－小结</a> </div> <div class="has_children"> <span>第二章－认识 JQuery</span> <a>123.1－Javascript和Javascript库</a> <a>124.2－加入Jquery代码</a> <a>125.3－编写简单的JQUERY代码</a> <a>126.4－JQUERY对象和其他库的冲突</a> <a>127.5－JQUERY对象和DOM对象</a> <a>128.6－JQUERY开发工具和插件</a> <a>129.7－小结</a> </div> </div> <script type="text/javascript"> $(document).ready(function(){ //原理说明： /* 首先我们要找到这个菜单的标题，在他的身上加上一个单击事件， 之后的$(this)就代表着这个has_children对象，给他加上一个选中的状态，并将这个菜单下的所有的a标签显示出来； 写到这一步，我们的菜单就基本上写完了，但是现在有个问题就是我们单击后菜单就不会回去了，下面们我们在使用 siblings（）这个函数也就是遍历同胞元素，去除掉所有同胞元素的样式，并且他们的菜单内容全部的隐藏掉！ */ $(".has_children").click(function(){ $(this).addClass("highlight").children("a").show().end(); $(this).siblings().removeClass("highlight").children("a").hide(); }); }); </script></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。