<!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>
可伸缩展开的级联菜单
最新推荐文章于 2018-05-22 10:26:52 发布