文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > html教程 > 正文

实现侧边导航栏的单开子菜单效果

聖光之護
发布： 2025-08-18 12:02:16
原创
228人浏览过

实现侧边导航栏的单开子菜单效果

本文旨在提供一个清晰、简洁的教程，指导开发者如何实现侧边导航栏中子菜单的单开效果。通过修改JavaScript代码，确保在任何时刻只有一个子菜单处于展开状态，提升用户体验。我们将详细讲解代码实现，并提供完整的示例，帮助你快速掌握这一技巧。

实现原理

核心思路在于，每次点击子菜单的头部时，首先检查当前是否有已展开的子菜单。如果有，则将其关闭，然后再展开当前点击的子菜单。这样就保证了始终只有一个子菜单处于展开状态。

代码实现

以下是如何修改 JavaScript 代码以实现此功能的步骤：

  1. 获取所有子菜单头部元素： 使用 document.querySelectorAll 获取所有 .sub_menu_header 元素。

  2. 为每个子菜单头部添加点击事件监听器： 遍历所有子菜单头部元素，并为每个元素添加点击事件监听器。

  3. 在点击事件处理函数中，首先关闭已打开的子菜单： 在点击事件处理函数中，首先使用 document.querySelector(".sub_menu_body.active") 查找当前是否有 .sub_menu_body 元素具有 active 类。 如果找到，则使用 classList.remove("active") 移除该类的名称。

  4. 然后，切换当前点击的子菜单的显示状态： 获取当前点击的子菜单对应的 sub_menu_body 元素，并切换其 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', () => {
        // 关闭已打开的子菜单
        if(document.querySelector(".sub_menu_body.active")) {
            document.querySelector(".sub_menu_body.active").classList.remove("active");
        }

        // 切换当前子菜单的显示状态
        subMenuBody.classList.toggle('active');
    })
})
登录后复制
登录后复制

这段代码首先检查是否存在已经激活的子菜单，如果存在，则移除其 active 类，从而关闭它。然后，它会切换当前点击的子菜单的 active 类，如果该子菜单是关闭的，则打开它；如果是打开的，则关闭它。

完整示例

以下是完整的 HTML、CSS 和 JavaScript 示例代码：

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

</html>
<script src="./script.js"></script>
登录后复制

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', () => {
        // 关闭已打开的子菜单
        if(document.querySelector(".sub_menu_body.active")) {
            document.querySelector(".sub_menu_body.active").classList.remove("active");
        }

        // 切换当前子菜单的显示状态
        subMenuBody.classList.toggle('active');
    })
})
登录后复制
登录后复制

注意事项

  • 确保 HTML 结构正确，.sub_menu_header 和 .sub_menu_body 元素之间的关系正确。
  • CSS 样式中的 display: none; 初始隐藏子菜单内容，display: block; 用于显示子菜单内容。
  • 此代码假设只有一个导航菜单。如果有多个导航菜单，需要修改选择器以确保只影响目标导航菜单。

总结

通过以上步骤，你就可以轻松实现侧边导航栏的单开子菜单效果，提升用户体验。这种方法简单易懂，易于维护，适用于各种 Web 项目。 希望本教程能帮助你解决实际问题。

以上就是实现侧边导航栏的单开子菜单效果的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
相关标签：
css ai 点击事件 overflow JavaScript css html JS 事件 选择器 display
来源：php中文网
收藏 点赞
上一篇：HTML如何制作右键菜单？怎么自定义上下文菜单？ 下一篇：表单中的novalidate属性有什么用？如何关闭表单验证？
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
HTML如何设置画中画音量样式？picture-in-picture-volume伪类的用法是什么？ 目前无法通过CSS伪类如::picture-in-picture-volume直接控制画中画（PiP）模式下音量条的样式，因为PiP窗口的UI由浏览器原生实现且出于安全、用户体验一致性和技术复杂性考虑被严格限制自定义；开发者只能通过JavaScript操作源视频元素的volume属性来间接控制音量，或依赖系统级音量调节，同时可在网页内构建自定义播放器界面，将音量控制与PiP按钮集成，从而在进入PiP前提供良好体验，确保用户无论通过网页控件还是操作系统功能都能有效调整音量，最终实现对PiP音量的全
2025-08-18 14:37:01
392
Angular中根据复选框状态控制文本框启用/禁用 本文详细介绍了如何在Angular应用中实现根据复选框的选中状态动态控制文本框的启用与禁用。通过利用Angular的数据绑定机制（[(ngModel)]）和属性绑定（[disabled]），结合事件处理函数，我们可以轻松地在用户勾选或取消勾选复选框时，实时更新关联文本框的可用性，从而创建更具交互性和用户友好的界面。
2025-08-18 14:26:13
134
表单中的键盘快捷键怎么实现？如何自定义快捷键操作？ 答案：通过JavaScript监听keydown事件实现表单快捷键，利用event.preventDefault()避免浏览器冲突，结合localStorage或后端存储实现自定义配置。
2025-08-18 14:11:01
122
HTML表单如何设置输入框的最大长度？maxlength属性怎么用？ HTML表单输入框的最大长度可通过maxlength属性设置，该属性限制用户输入的字符数，适用于text、password、email等input类型及textarea标签。例如，设置maxlength="20"即允许最多输入20个字符，超出部分将被浏览器阻止。此属性有助于前端数据验证和用户体验优化，防止过长数据提交导致数据库错误或安全风险。需注意，maxlength仅在前端起作用，后端仍需进行数据验证以确保安全性。与size属性不同，maxlength控制可输入字符数量，而size仅定义输入框
2025-08-18 14:10:02
433
HTML表单如何实现离线功能？怎样在没有网络时提交表单？ 核心是利用本地存储和ServiceWorker实现离线表单。首先通过localStorage或IndexedDB缓存表单数据，结合navigator.onLine和网络请求检测离线状态；在离线时，ServiceWorker拦截POST请求，将数据存入IndexedDB队列，并返回提示响应；当网络恢复（online事件触发），ServiceWorker自动重试提交队列中的表单，成功后清除数据并可发送通知反馈用户；同时需对敏感数据加密、控制作用域、处理版本冲突以保障安全与一致性。
2025-08-18 12:47:01
819
HTML表单如何实现负载测试？怎样模拟高并发提交？ 使用JMeter进行HTML表单的负载测试，首先下载安装JMeter，创建测试计划并添加线程组配置并发用户数、启动时间及循环次数，接着添加HTTP请求设置POST方法、目标URL及表单数据，通过CSVDataSetConfig实现参数化以模拟真实用户，添加ResponseAssertion进行断言验证响应结果，配置AggregateReport和ViewResultsTree等监听器查看响应时间、吞吐量和错误率，必要时通过分布式测试提升并发能力，最终运行测试并分析结果；若使用Python脚本，则
2025-08-18 12:37:01
571
表单中的CAPTCHA怎么集成？如何防止机器人提交？ 集成CAPTCHA可有效区分人类与机器人，核心是验证人类认知能力，常用方案包括reCAPTCHA、hCaptcha、滑动验证码等，需结合前端引入JS库、后端调用API验证token，并可配合蜜罐、时间戳、IP限频等策略提升安全性，选择时应权衡安全、体验与成本，定期监控失败率与破解情况以优化防护效果。
2025-08-18 12:14:01
488
表单中的novalidate属性有什么用？如何关闭表单验证？ novalidate属性的作用是禁用浏览器默认的表单验证行为，允许开发者自行控制验证逻辑。当该属性存在时，即使表单字段包含required、type="email"或pattern等HTML5验证规则，浏览器也不会在提交时自动阻止无效数据或显示默认错误提示，表单会直接提交。这使得开发者可以完全通过JavaScript实现自定义的客户端验证，包括实时反馈、复杂逻辑判断和统一的UI样式，同时确保服务器端仍进行严格的数据验证以保障安全性和完整性。值得注意的是，novalidate仅关闭了浏览器的自动验
2025-08-18 12:03:01
911
实现侧边导航栏的单开子菜单效果 本文旨在提供一个清晰、简洁的教程，指导开发者如何实现侧边导航栏中子菜单的单开效果。通过修改JavaScript代码，确保在任何时刻只有一个子菜单处于展开状态，提升用户体验。我们将详细讲解代码实现，并提供完整的示例，帮助你快速掌握这一技巧。
2025-08-18 12:02:16
228
HTML如何制作右键菜单？怎么自定义上下文菜单？ HTML仅提供结构，无法直接创建自定义右键菜单；2.必须使用JavaScript拦截contextmenu事件并动态显示自定义菜单；3.通过event.preventDefault()阻止浏览器默认菜单；4.利用clientX/clientY定位菜单，确保其在视口范围内；5.点击页面空白处、滚动或按Esc键应隐藏菜单；6.需为菜单添加ARIA角色（如role="menu"）以提升可访问性；7.支持键盘导航（Tab、方向键、Enter）和焦点管理；8.移动端应使用长按替代右键，并考虑适配方案；9.
2025-08-18 10:02:01
254
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部