实现侧边导航栏同时只展开一个子菜单-html教程-PHP中文网

实现侧边导航栏同时只展开一个子菜单

聖光之護

发布： 2025-08-17 23:46:01

原创

792人浏览过

实现侧边导航栏同时只展开一个子菜单

本文将介绍如何修改现有的侧边导航栏代码，使其在任何时候只允许一个子菜单处于展开状态。我们将通过 JavaScript 来实现这一功能，确保用户体验的简洁性和一致性。核心思路是在点击新的子菜单时，先关闭当前已展开的子菜单，然后再展开新的子菜单。

实现原理

核心在于每次点击子菜单的头部时，先检查是否有其他子菜单处于 active 状态。如果有，则先移除该子菜单的 active 类，然后再为当前点击的子菜单添加 active 类。

具体实现

以下是修改后的 JavaScript 代码：

const sub_menu = document.querySelectorAll('.sub_menu');
sub_menu.forEach((item) => {
    const subMenuHeader = item.querySelector('.sub_menu_header')
    const subMenuBody = item.querySelector('.sub_menu_body')
    subMenuHeader.addEventListener('click', () => {
        // Check if any submenu is already active
        if(document.querySelector(".sub_menu_body.active")) {
            document.querySelector(".sub_menu_body.active").classList.remove("active");
        }

        // Toggle the current submenu
        if (!subMenuBody.classList.contains('active')) {
            subMenuBody.classList.add('active');
        } else {
            subMenuBody.classList.remove('active');
        }
    })
})

登录后复制

这段代码首先获取所有的子菜单项。然后，为每个子菜单的头部添加点击事件监听器。在点击事件处理函数中，首先检查是否存在已经激活的子菜单，如果存在，则移除其 active 类。最后，再根据当前点击的子菜单的状态，决定是添加还是移除 active 类。

代码解释

document.querySelectorAll('.sub_menu'): 选择所有类名为 sub_menu 的元素，通常是包含子菜单的容器。
item.querySelector('.sub_menu_header'): 在每个子菜单容器中，选择类名为 sub_menu_header 的元素，这通常是点击以展开/折叠子菜单的头部。
item.querySelector('.sub_menu_body'): 在每个子菜单容器中，选择类名为 sub_menu_body 的元素，这通常是实际包含子菜单内容的元素。
document.querySelector(".sub_menu_body.active"): 选择当前页面中第一个同时具有 sub_menu_body 和 active 类的元素。如果存在，则表示当前有子菜单处于展开状态。
classList.add('active') 和 classList.remove('active'): 分别用于添加和移除元素的 active 类。active 类通常用于控制子菜单的显示和隐藏。

完整示例

以下是完整的 HTML、CSS 和 JavaScript 代码示例，展示了如何实现侧边导航栏同时只展开一个子菜单的功能。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

HTML (index.html):

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="./style.css" />
    <title>side nav</title>
</head>

<body>
    <nav id="nav_menu_query_off">
        <menu id="main_menu">
            <li class="main_list_item">
                <div class="menu_header">menu one</div>
                <div class="menu_body">
                    <menu class="sub_menu">
                        <div class="sub_menu_header">sub menu one</div>
                        <div class="sub_menu_body">
                            <li class="inner_list_item"><a href="">link one</a></li>
                            <li class="inner_list_item"><a href="">link two</a></li>
                            <li class="inner_list_item"><a href="">link three</a></li>
                            <li class="inner_list_item"><a href="">link four</a></li>
                            <li class="inner_list_item"><a href="">link five</a></li>
                            <li class="inner_list_item"><a href="">link six</a></li>
                            <li class="inner_list_item"><a href="">link seven</a></li>
                        </div>
                    </menu>
                    <menu class="sub_menu">
                        <div class="sub_menu_header">sub menu two</div>
                        <div class="sub_menu_body">
                            <li class="inner_list_item"><a href="">link one</a></li>
                            <li class="inner_list_item"><a href="">link two</a></li>
                            <li class="inner_list_item"><a href="">link three</a></li>
                            <li class="inner_list_item"><a href="">link four</a></li>
                            <li class="inner_list_item"><a href="">link five</a></li>
                            <li class="inner_list_item"><a href="">link six</a></li>
                            <li class="inner_list_item"><a href="">link seven</a></li>
                        </div>
                    </menu>
                    <menu class="sub_menu">
                        <div class="sub_menu_header">sub menu three</div>
                        <div class="sub_menu_body">
                            <li class="inner_list_item"><a href="">link one</a></li>
                            <li class="inner_list_item"><a href="">link two</a></li>
                            <li class="inner_list_item"><a href="">link three</a></li>
                            <li class="inner_list_item"><a href="">link four</a></li>
                            <li class="inner_list_item"><a href="">link five</a></li>
                            <li class="inner_list_item"><a href="">link six</a></li>
                            <li class="inner_list_item"><a href="">link seven</a></li>
                        </div>
                    </menu>
                </div>
            </li>
            <li class="main_list_item">
                <div class="menu_header">menu two</div>
                <div class="menu_body">
                    <menu class="sub_menu">
                        <div class="sub_menu_header">sub menu one</div>
                        <div class="sub_menu_body">
                            <li class="inner_list_item"><a href="">link one</a></li>
                            <li class="inner_list_item"><a href="">link two</a></li>
                            <li class="inner_list_item"><a href="">link three</a></li>
                            <li class="inner_list_item"><a href="">link four</a></li>
                            <li class="inner_list_item"><a href="">link five</a></li>
                            <li class="inner_list_item"><a href="">link six</a></li>
                            <li class="inner_list_item"><a href="">link seven</a></li>
                        </div>
                    </menu>
                    <menu class="sub_menu">
                        <div class="sub_menu_header">sub menu two</div>
                        <div class="sub_menu_body">
                            <li class="inner_list_item"><a href="">link one</a></li>
                            <li class="inner_list_item"><a href="">link two</a></li>
                            <li class="inner_list_item"><a href="">link three</a></li>
                            <li class="inner_list_item"><a href="">link four</a></li>
                            <li class="inner_list_item"><a href="">link five</a></li>
                            <li class="inner_list_item"><a href="">link six</a></li>
                            <li class="inner_list_item"><a href="">link seven</a></li>
                        </div>
                    </menu>
                    <menu class="sub_menu">
                        <div class="sub_menu_header">sub menu three</div>
                        <div class="sub_menu_body">
                            <li class="inner_list_item"><a href="">link one</a></li>
                            <li class="inner_list_item"><a href="">link two</a></li>
                            <li class="inner_list_item"><a href="">link three</a></li>
                            <li class="inner_list_item"><a href="">link four</a></li>
                            <li class="inner_list_item"><a href="">link five</a></li>
                            <li class="inner_list_item"><a href="">link six</a></li>
                            <li class="inner_list_item"><a href="">link seven</a></li>
                        </div>
                    </menu>
                </div>
            </li>
        </menu>
    </nav>
    <script src="./script.js"></script>
</body>

</html>

登录后复制

CSS (style.css):

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

body{
    font-family: 'Ebrima';
    background-color: #444444;
}



nav#nav_menu_query_off{
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    background-color: #222222;
    overflow: auto;
    z-index: 2;
    padding: 20px 0 20px 20px;
}
nav#nav_menu_query_off menu#main_menu li.main_list_item div.menu_header{
    text-transform: uppercase;
    padding-bottom: 10px;
}
nav#nav_menu_query_off menu li{
    color: #f0f0f0;
}
nav#nav_menu_query_off menu#main_menu li.main_list_item:not(:last-child){
    padding-bottom: 20px;
}
nav#nav_menu_query_off menu#main_menu li.main_list_item:not(:first-child){
    padding-top: 20px;
}
nav#nav_menu_query_off menu#main_menu div.menu_body{
    padding: 0px 0 0 20px;
    border-left: 1px solid #efefef;
}
nav#nav_menu_query_off menu#main_menu div.menu_body menu.sub_menu{
    padding: 10px 0px;
    border-bottom: 1px solid #efefef;
}
nav#nav_menu_query_off menu#main_menu div.menu_body menu.sub_menu div.sub_menu_header{
    text-transform: capitalize;
    font-size: 14px;
}
nav#nav_menu_query_off menu#main_menu div.menu_body menu.sub_menu div.sub_menu_header:hover{
    cursor: pointer;
}
nav#nav_menu_query_off menu#main_menu div.menu_body menu.sub_menu div.sub_menu_body{
    padding: 5px 0 0 0px;
    /* THIS HIDES ALL SUBMENUS */
    display: none;
}
nav#nav_menu_query_off menu#main_menu div.menu_body menu.sub_menu div.sub_menu_body.active{
    display: block;
}
nav#nav_menu_query_off menu#main_menu li.main_list_item div.menu_body menu.sub_menu div.sub_menu_body li.inner_list_item{
    font-size: 14px;
}

nav#nav_menu_query_off menu li .menu_body menu li a{
    color: #f0f0f0;
    display: block;
    padding: 5px 0 5px 20px;
}
nav#nav_menu_query_off menu li .menu_body menu li a:hover{
    background-color: #999999;
}

nav::-webkit-scrollbar{
    /* width: 4px; */
    /* helps remove scrollbar which resizes or shifts list items */
    display: none;
}

登录后复制

JavaScript (script.js):

const sub_menu = document.querySelectorAll('.sub_menu');
sub_menu.forEach((item) => {
    const subMenuHeader = item.querySelector('.sub_menu_header')
    const subMenuBody = item.querySelector('.sub_menu_body')
    subMenuHeader.addEventListener('click', () => {
        // Check if any submenu is already active
        if(document.querySelector(".sub_menu_body.active")) {
            document.querySelector(".sub_menu_body.active").classList.remove("active");
        }

        // Toggle the current submenu
        if (!subMenuBody.classList.contains('active')) {
            subMenuBody.classList.add('active');
        } else {
            subMenuBody.classList.remove('active');
        }
    })
})

登录后复制