<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery-1.11.0.js"></script><title>HiddenAndShow</title> <style type="text/css"> li { list-style:none; margin-left:18px; display:none; } </style></head><body> <ul> <a href="#">我是菜单1</a> <li><a href="#" id="load.html">我是子菜单1</a></li> <li><a href="#">我是子菜单2</a></li> </ul> <ul> <a href="#">我是菜单2</a> <li><a href="#">我是子菜单1</a></li> <li><a href="#">我是子菜单2</a></li> </ul> <div id="content"></div> <script type="text/javascript"> $(document).ready(function() { //找到所有的ul标签下面的a标签 var as = $("ul > a"); //给所有的a标签注册click事件 as.click(function(){ //找到当前a标签同一级的兄弟节点li var aNode = $(this); var lis = aNode.nextAll("li"); //让所有的子节点显示或者隐藏 lis.toggle("show"); }); //给li里面的a标签注册一个click事件 $("li > a").click(function(){ $("#content").load($(this).attr("id")); }); }); </script></body></html>
分手后的思念是犯贱
灰太狼
冷不防
你的名字
柔情只为你懂
还没有评论，来说两句吧...