<!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 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>