jQuery实现折叠菜单

实现效果主要用到的两个方法就是 slideDown 及slideUp ，其实换做slideToggle效果也不错
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折叠</title>
    <link rel="icon" href="../../../img/sup.ico" type="image/x-icon">
    <script src="../../../jquery-3.4.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .panel {
            margin: 10px auto;
            width: 200px;
            background: linear-gradient(90deg, pink, wheat);
            list-style: none;
            font-size: 20px;
            border-radius: 5px;
        }

        .Level {
            border: 1px solid #333333;
            position: relative;
            line-height: 40px;
            cursor: pointer;
        }

        .Level span {
            position: absolute;
            right: 10px;
            /*transform: rotate(90deg);!*顺时针旋转90°*!*/
        }

        .Level:hover {
            background: linear-gradient(90deg, darksalmon, deeppink);
        }

        .panel li:first-child {
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .panel li:last-child {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .fold {
            list-style: none;
            height: 125px;
        }

        .fold li {
            width: 198px;
            height: 30px;
            background: linear-gradient(90deg, whitesmoke, wheat);
            border-top: 1px solid #333;
            line-height: 30px;
            white-space: pre; /*按照pre标签规则书写，空格，换行等不被过滤*/
            cursor: default;
        }

        .hidden {
            display: none;
        }
    </style>
</head>
<body>
<ul class="panel">
    <li class="Level">一级菜单<span>></span>
        <ul class="fold hidden">
            <li> 二级菜单</li>
            <li> 二级菜单</li>
            <li> 二级菜单</li>
            <li> 二级菜单</li>
        </ul>
    </li>
    <li class="Level">一级菜单<span>></span>
        <ul class="fold hidden">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li class="Level">一级菜单<span>></span>
        <ul class="fold hidden">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li class="Level">一级菜单<span>></span>
        <ul class="fold hidden">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li class="Level">一级菜单<span>></span>
        <ul class="fold hidden">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
</ul>

<script>
    $(function () {
        $('.Level').on('click', function () {
            $(this).children('.fold').slideDown()//点击显示二级菜单
                .parent().children('span').css({transform: 'rotate(90deg)'});// > 方向变为向下
            let $sibling = $(this).siblings().children('.fold');//获取点击的li的兄弟元素中的二级菜单
            $sibling.slideUp(1000);//使其向二级菜单上折叠
            $sibling.parent().children('span').css({transform: 'rotate(0deg)'})//>方向变回
        })
    })
</script>
</body>
</html>
在这里插入图片描述
Hello Hongbin
发布了20 篇原创文章 · 获赞 5 · 访问量 637
私信关注
jQuery实现折叠菜单

猜你喜欢
