一个简单的折叠菜单实现_html折叠菜单csdn-CSDN博客

本文链接：https://blog.csdn.net/weixin_44177998/article/details/107669298

一个简单的折叠菜单实现

工作后的第一个博客,因为需求做了一个折叠菜单，但是网上找到的要么不符合需求（没法点击菜单将当前展开的菜单收回），要么过于复杂（我连JS类都不太懂），对我这样一个新手来说很吃力，所以就自己琢磨着写了这样一个简单的折叠菜单。

1. html代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/personalWorkPlatform.css">
</head>

<body>
    <!-- 左部菜单 -->
    <div id="leftMenu">
        <ul class="nav">
            <li>
                <label for="">title-1</label>
                <span class="triangle-down"></span>
                <ul class="sub">
                    <li><a href="#">title-1-1</a></li>
                    <li><a href="#">title-1-2</a></li>
                    <li><a href="#">title-1-3</a></li>
                    <li><a href="#">title-1-4</a></li>
                    <li><a href="#">title-1-5</a></li>
                    <li><a href="#">title-1-6</a></li>
                    <li><a href="#">title-1-7</a></li>
                    <li><a href="#">title-1-8</a></li>
                    <li><a href="#">title-1-9</a></li>
                    <li><a href="#">title-1-10</a></li>
                    <li><a href="#">title-1-11</a></li>
                    <li><a href="#">title-1-12</a></li>
                    <li><a href="#">title-1-13</a></li>
                    <li><a href="#">title-1-14</a></li>
                </ul>
            </li>
            <li>
                <label for="">title-2</label>
                <span class="triangle-down"></span>
                <ul class="sub">
                    <li><a href="#">title-2-1</a></li>
                    <li><a href="#">title-2-2</a></li>
                    <li><a href="#">title-2-3</a></li>
                    <li><a href="#">title-2-4</a></li>
                    <li><a href="#">title-2-5</a></li>
                    <li><a href="#">title-2-6</a></li>
                    <li><a href="#">title-2-7</a></li>
                    <li><a href="#">title-2-8</a></li>
                    <li><a href="#">title-2-9</a></li>
                    <li><a href="#">title-2-10</a></li>
                    <li><a href="#">title-2-11</a></li>
                    <li><a href="#">title-2-12</a></li>
                    <li><a href="#">title-2-13</a></li>
                    <li><a href="#">title-2-14</a></li>
                </ul>
            </li>
            <li>
                <label for="">title-3</label>
                <span class="triangle-down"></span>
                <ul class="sub">
                    <li><a href="#">title-3-1</a></li>
                    <li><a href="#">title-3-2</a></li>
                    <li><a href="#">title-3-3</a></li>
                    <li><a href="#">title-3-4</a></li>
                    <li><a href="#">title-3-5</a></li>
                    <li><a href="#">title-3-6</a></li>
                    <li><a href="#">title-3-7</a></li>
                    <li><a href="#">title-3-8</a></li>
                    <li><a href="#">title-3-9</a></li>
                    <li><a href="#">title-3-10</a></li>
                    <li><a href="#">title-3-11</a></li>
                    <li><a href="#">title-3-12</a></li>
                    <li><a href="#">title-3-13</a></li>
                    <li><a href="#">title-3-14</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <script src="js/jquery-latest.js"></script>
    <script src="js/folderMenu.js"></script>
</body>

</html>

2. JS代码

$(function() {

    folderMenu()

    function folderMenu() {
        $('.nav>li').on('click', function() {
            // 当前ul未展开
            if ($(this).children('.sub').css('display') == 'none') {
                // 遍历除了当前ul的其他ul
                $(this).siblings().each(function(index, ele) {
                        // 若ul的display不为none，说明当前ul为展开状态
                        if ($(ele).children('.sub').css('display') != 'none') {
                            // ul收回
                            $(ele).children('.sub').slideUp(300);
                            // 将朝向上的箭头换为朝向下的
                            $(ele).children('.triangle-up').removeClass('triangle-up').addClass('triangle-down');
                        }
                    })
                    // 展开当前ul
                $(this).children('.sub').slideDown(300);
                // 将朝向下的箭头换为朝向上的
                $(this).children('.triangle-down').removeClass('triangle-down').addClass('triangle-up');
            } else {
                // 当前ul已展开
                $(this).children('.sub').slideUp(300);
                // 将朝向上的箭头换为朝向下的
                $(this).children('.triangle-up').removeClass('triangle-up').addClass('triangle-down');

            }

        })
        $('.sub li').on('click', function(e) {
            event.stopPropagation(); //阻止子级li点击触发父级点击事件：阻止冒泡
        })
    }
})

3. css代码

#leftMenu {
    width: 18%;
    display: inline-block;
    box-sizing: border-box;
}

.nav {
    margin: 0 auto;
    background-color: #EEEEEE;
}

.nav>li {
    list-style: none;
    border: none;
    border-bottom: none;
    line-height: 30px;
    border-top: 1px solid #c6c6c6;
    border-bottom: 1px solid #c6c6c6;
    padding: 1% 0 1% 15%;
    text-align: right;
}

.nav>li label {
    /* display: inline-block; */
    vertical-align: middle;
    float: left;
}

.sub {
    display: none;
    background-color: #EEEEEE;
    text-align: left;
}

.sub>li {
    list-style: none;
    padding-left: 15%;
    font-size: 14px;
}

.sub>li:hover {
    background-color: #2497FF;
}


/* 向上箭头 */

.triangle-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #c6c6c6;
    display: inline-block;
    margin-right: 5%;
}


/* 向下箭头 */

.triangle-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #c6c6c6;
    display: inline-block;
    margin-right: 5%;
}

.sub li>a {
    text-decoration: none;
    color: #000000;
}

希望能对你有所帮助。