左侧菜单栏折叠展开效果-超级简单

最新推荐文章于 2025-07-11 16:49:04 发布

原创最新推荐文章于 2025-07-11 16:49:04 发布 · 2.5w 阅读

134 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了一个基于jQuery的管理后台左侧菜单栏折叠展开效果的实现。通过HTML、CSS和JavaScript代码，展示了如何创建响应式菜单，包括一级菜单的点击事件、子菜单的显示隐藏、二级菜单的选中状态及事件冒泡的处理。

分享一个常见于管理后台的左侧菜单栏折叠展开的效果，基于jquery，效果图如下：

一：页面结构：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="menu-list">
    <ul>
        <li class="first-menu">
            <a href="javascript:;">首页</a>
        </li>
        <li class="first-menu">
            <a href="javascript:;">菜单1</a>
            <ul>
                <li class="second-menu">
                    <a href="javascript:;">子菜单1-1</a>
                </li>
                <li class="second-menu">
                    <a href="javascript:;">子菜单1-2</a>
                </li>
                <li class="second-menu">
                    <a href="javascript:;">子菜单1-3</a>
                </li>
                <li class="second-menu">
                    <a href="javascript:;">子菜单1-4</a>
                </li>
            </ul>
        </li>
        <li class="first-menu">
            <a href="javascript:;">菜单2</a>
            <ul>
                <li class="second-menu">
                    <a href="javascript:;">子菜单2-1</a>
                </li>
                <li class="second-menu">
                    <a href="javascript:;">子菜单2-2</a>
                </li>
                <li class="second-menu">
                    <a href="javascript:;">子菜单2-3</a>
                </li>
            </ul>
        </li>
        <li class="first-menu">
            <a href="javascript:;">菜单3</a>
            <ul>
                <li class="second-menu">
                    <a href="javascript:;">子菜单3-1</a>
                </li>
                <li class="second-menu">
                    <a href="javascript:;">子菜单3-2</a>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

二：页面样式css，放在head标签里

<style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        html,body{
            height: 100%;
        }
        .menu-list{
            height: 100%;
            padding-top:20px;
            font-size:18px;
            background-color: #2e3254;
        }
        .menu-list ul{
            list-style: none;
            padding:0;
            margin:0 auto;
        }
        .menu-list ul li{
            text-align:left;
            color: #616c82;
        }
        .menu-list ul li.first-menu{
            overflow: hidden;
        }
        .menu-list ul li:HOVER>a{
            color: #007FC8;
        }
        .menu-list ul li a{
            display:block;
            padding:16px 0;
            color: #5f78a2;
            text-decoration:none;
        }
        .menu-list ul li.first-menu>a{
            padding-left: 15px;
        }
        .menu-list ul li.first-menu.active>a{
            color: #1c9dff;
            vertical-align: middle;
        }
        .menu-list ul li.first-menu.active ul li.second-menu.current a{
            background-color: #4d527c;
            font-size: 18px;
        }
        .menu-list ul li.first-menu ul{
            display:none;
        }
        .menu-list ul li.first-menu ul li.second-menu a{
            padding: 12px 0 12px 31px;
            font-size:16px;
            color: #8aa3cd;
        }
    </style>

三：引入jquery文件

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js"></script>

四：给一级菜单绑定点击事件，点击时展开下面的子菜单

        $(".menu-list .first-menu").click(function(){
            $(this).addClass("active").siblings().removeClass("active");
            $(this).find("ul").slideToggle(500);
            $(this).siblings().find("ul").hide();
        })

五：给二级菜单绑定事件，点击时加入选中的深色背景

      $(".menu-list .second-menu").click(function(){
            var $this = $(this);
            $(".second-menu").each(function () {
                if($(this).hasClass("current")){
                    $(this).removeClass("current");
                }
            })
            $this.addClass("current").siblings().removeClass("current");
        })

六：阻止二级菜单点击发生冒泡，当点击二级菜单的时候，一级菜单的事件也会发生，此时二级菜单会被收起，因此需要阻止事件冒泡

        //  阻止事件冒泡
        $(".menu-list .first-menu ul").bind("click",function(event){
            event.stopPropagation();
        });

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流