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

最新推荐文章于 2022-04-07 11:09:27 发布

weixin_30709635

最新推荐文章于 2022-04-07 11:09:27 发布

阅读量107

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shanyansheng/p/5060842.html

版权

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