本文旨在提供一个清晰、简洁的教程，指导开发者如何实现侧边导航栏中子菜单的单开效果。通过修改JavaScript代码，确保在任何时刻只有一个子菜单处于展开状态，提升用户体验。我们将详细讲解代码实现，并提供完整的示例，帮助你快速掌握这一技巧。
实现原理
核心思路在于，每次点击子菜单的头部时，首先检查当前是否有已展开的子菜单。如果有，则将其关闭，然后再展开当前点击的子菜单。这样就保证了始终只有一个子菜单处于展开状态。
代码实现
以下是如何修改 JavaScript 代码以实现此功能的步骤：
获取所有子菜单头部元素： 使用 document.querySelectorAll 获取所有 .sub_menu_header 元素。
为每个子菜单头部添加点击事件监听器： 遍历所有子菜单头部元素，并为每个元素添加点击事件监听器。
在点击事件处理函数中，首先关闭已打开的子菜单： 在点击事件处理函数中，首先使用 document.querySelector(“.sub_menu_body.active”) 查找当前是否有 .sub_menu_body 元素具有 active 类。 如果找到，则使用 classList.remove(“active”) 移除该类的名称。
然后，切换当前点击的子菜单的显示状态： 获取当前点击的子菜单对应的 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):
side nav
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 项目。 希望本教程能帮助你解决实际问题。
以上就是实现侧边导航栏的单开子菜单效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1572561.html
微信扫一扫 
支付宝扫一扫 
