<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>JS</title>
<style>
ul,li{margin:0; padding:0; list-style:none}
h3{margin:0}
a{text-decoration:none;color:#333}
.navlist{width:240px; margin-left:60px;}
.navlist h3{-webkit-user-select:none;cursor:pointer;height:40px;line-height:40px;border:1px solid #999;background-color:#abcdef;padding:0 20px;}
.navlist li{height:38px;line-height:38px;padding:0 20px;border:1px solid #999;border-top:none;}
.navlist ul{display:none}
</style>
<script src="./jquery-1.8.3.min.js"></script>
<script>
$(function(){
//绑定单击事件
$(".navlist h3").click(function(){
if ($(this).next('ul').is(":hidden")) {
$(this).next('ul').slideDown();
} else {
$(this).next('ul').slideUp();
}
})
})
</script>
</head>
<body>
<h1>jquery 后台管理</h1>
<hr>
<div class="navlist">
<h3>用户管理</h3>
<ul>
<li><a href="#">用户查询</a></li>
<li><a href="#">用户添加</a></li>
<li><a href="#">分配角色</a></li>
</ul>
<h3>商品管理</h3>
<ul>
<li><a href="#">用户查询</a></li>
<li><a href="#">用户添加</a></li>
<li><a href="#">分配角色</a></li>
<li><a href="#">分配角色</a></li>
</ul>
<h3>订单管理</h3>
<ul>
<li><a href="#">用户查询</a></li>
<li><a href="#">用户添加</a></li>
<li><a href="#">分配角色</a></li>
<li><a href="#">分配角色</a></li>
</ul>
<h3>评价管理</h3>
<ul>
<li><a href="#">用户查询</a></li>
<li><a href="#">用户添加</a></li>
<li><a href="#">分配角色</a></li>
<li><a href="#">分配角色</a></li>
</ul>
<h3>留言管理</h3>
<ul>
<li><a href="#">用户查询</a></li>
<li><a href="#">用户添加</a></li>
<li><a href="#">分配角色</a></li>
<li><a href="#">分配角色</a></li>
</ul>
</div>
</body>
</html>