你的位置:首页 > 软件开发 > Java > jquery 后台管理菜单展开与关闭实例

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

发布时间:2015-12-20 15:00:31
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>JS</title> &l ...
<!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

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录