<!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='/images/loading.gif' data-original="./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>
原标题：jquery 后台管理菜单展开与关闭实例
关键词：jquery
我知道了 