2 显示树形菜单
Menu.css
Jquerymenu.js
TestMenu.html
Menu.css
/*加载html页面的时候，去掉li前面的点, 利用css的标签选择器*/
li{
list-style: none; /*使li前面的小圆点消失*/
margin-left: 6px; /*子菜单缩进*/
display: none;
}
Jquerymenu.js
/*点击主菜单按钮，子菜单就显示，在点击就关闭*/
/*页面装载的时候就给主菜单添加onclick()事件*/
$(document).ready(function(){
/*找到所有的主菜单中的a节点*/
var as = $("ul > a");
/*给主菜单添加点击的事件*/
as.click(function(){
/*找到当前的a节点*/
var aNode = $(this);
/*找到a节点的兄弟li节点*/
var lis = aNode.nextAll("li");
/*让子节点显示*/
lis.toggle("show");
})
/*注册子菜单的click事件，加载其他页面*/
$("li > a").click(function(){
$("#content").load($(this).attr("id"));/*根据当前节点的id找到页面，load到div*/
})
})
TestMenu.html
<!DOCTYPE HTML PUBLIC "-//W
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/jquerymenu.js"></script>
<link type="text/css" rel="stylesheet" href="css/menu.css">
</head>
<body>
<ul>
<a href="#">我是菜单</a>
<li><a href="#" id="hello.html">我是子菜单</a></li>
<li><a href="#">我是子菜单</a></li>
</ul>
<ul>
<a href="#">我是菜单</a>
<li><a href="#">我是子菜单</a></li>
<li><a href="#">我是子菜单</a></li>
</ul>
<div id="content"></div>
</body>
</html>
浙公网安备 33010602011771号