你的位置:首页 > Java教程

[Java教程]jquery 后台管理菜单展开与关闭实例


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