您的位置：首页 > Web前端 > JQuery

jquery 后台管理菜单展开与关闭实例(2)

2015-12-20 14:30 651 查看

<!doctype html>
<html lang="en">
<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 ul:first").show();
//绑定单击事件
$(".navlist h3").click(function(){
$(this).next('ul').slideDown().siblings('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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航