本文将介绍如何修改现有的侧边导航栏代码，使其在任何时候只允许一个子菜单处于展开状态。我们将通过 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 代码示例，展示了如何实现侧边导航栏同时只展开一个子菜单的功能。
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'); } }) })
注意事项
- 确保你的 CSS 样式中定义了 .sub_menu_body.active 的显示样式，例如 display: block;。
- 如果你的项目使用了其他的 JavaScript 框架或库，例如 jquery，可以根据实际情况修改代码。
总结
通过以上步骤，你可以轻松地实现侧边导航栏同时只展开一个子菜单的功能，从而提升用户体验。这种方法简单有效，易于理解和维护，适用于各种类型的 Web 项目。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
