菜单展开和收缩

最新推荐文章于 2022-09-05 22:14:02 发布

weixin_30657999

最新推荐文章于 2022-09-05 22:14:02 发布

阅读量120

点赞数

原文链接：http://www.cnblogs.com/DCL1314/p/7491241.html

版权

菜单展开和收缩

方法一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单展开和收缩</title>
<style>
        *{
            margin: 0;
            padding: 0;
        }
        .navList{
            width: 200px;
        }
        .navList h3{
            padding:10px 20px;
            cursor:pointer;
            font-size:18px;
            background:#abcdef;
            border:1px solid #999;
        }
        .navList ul{
            list-style: none;
            display:none;

        }
        .navList ul li{
            padding:10px 20px;
            background-color:#f5f5f5;
            border:1px solid #ccc;
            border-bottom:none;
        }
        .navList ul li a{
            text-decoration:none;
            color:#333;
        }
    </style>
</head>
<body>
    <div class="navList">
        <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>

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

    <script src="./jquery-3.2.1.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>
</body>
</html>

方法二

    <script>
        $(function(){
            $(".navList h3").click(function(){
                $(this).next("ul").slideToggle();
            })
        })
    </script>

方法三

<script>
    $(function(){
        $(".navList ul").first().show();
        $(".navList h3").click(function(){
            $(this).next("ul").slideDown().siblings("ul").slideUp();
        })
    })
</script>

转载于:https://www.cnblogs.com/DCL1314/p/7491241.html

weixin_30657999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
菜单展开和收缩

菜单展开和收缩方法一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>菜单展开和收缩</title><style> *{ margin: 0; ...
复制链接

扫一扫