JQ制作一个目录树菜单
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>关于折叠菜单案例</title>
<style>
*{
margin: 0;
padding:0;
font-family: "Microsoft YaHei";
}
li{
list-style: none;
}
.container{
width:200px;
height:auto;
margin: 30px auto;
background: #444;
}
.menu > li > h1{
color: #fff;
font-size:18px;
text-indent: 10px;
cursor: pointer;
border-bottom: 1px solid #ddd;
}
.menuList{
display: none;
}
.menuList > li{
color: #fff;
text-indent: 30px;
line-height: 30px;
font-size:14px;
}
.hover{
background: #360;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<ul class="menu">
<li>
<h1>菜单一</h1>
<ul class="menuList" style="display: block">
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
</ul>
</li>
<li>
<h1>菜单二</h1>
<ul class="menuList">
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
</ul>
</li>
<li>
<h1>菜单三</h1>
<ul class="menuList">
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
</ul>
</li>
</ul>
</div>
</body>
<script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$(".menu > li > h1").on("click",function () {
$(this).next("ul.menuList").stop().slideToggle(500).parent("li").siblings("li").children("ul.menuList").slideUp(500);
})
$(".menuList > li").hover(function () {
$(this).addClass("hover");
},function () {
$(this).removeClass("hover");
})
})
</script>
</html> 运行效果
页:
[1]