实现侧边导航单选激活效果：JavaScript与CSS实践-小浪学习网

实现侧边导航单选激活效果：JavaScript与CSS实践

本教程旨在解决侧边导航菜单中多项同时激活显示边框的问题。通过JavaScript动态管理css类，确保在点击任一菜单项时，仅当前被选中的菜单项显示红色激活边框，而其他所有菜单项的激活状态被清除，从而实现单一选中效果，提升用户体验。

侧边导航基础结构

在构建交互式侧边导航时，我们通常会使用html来定义菜单结构，css来美化其外观和定义激活状态，以及javascript来处理用户交互逻辑。

HTML 结构

以下HTML代码展示了一个典型的侧边导航菜单结构，其中包含多个 main_list_item 元素，每个元素代表一个主菜单项。

<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" />   <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"></menu>           <menu class="sub_menu"></menu>           <menu class="sub_menu"></menu>         </div>       </li>       <li class="main_list_item">         <div class="menu_header">menu two</div>         <div class="menu_body">           <menu class="sub_menu"></menu>           <menu class="sub_menu"></menu>           <menu class="sub_menu"></menu>         </div>       </li>       <li class="main_list_item">         <div class="menu_header">menu three</div>         <div class="menu_body">           <menu class="sub_menu"></menu>           <menu class="sub_menu"></menu>           <menu class="sub_menu"></menu>         </div>       </li>       <li class="main_list_item">         <div class="menu_header">menu four</div>         <div class="menu_body">           <menu class="sub_menu"></menu>           <menu class="sub_menu"></menu>           <menu class="sub_menu"></menu>         </div>       </li>     </menu>   </nav> </body> </html>

CSS 样式

CSS用于定义导航的布局和视觉样式。其中，.active 类是实现激活效果的关键，它为菜单项底部添加了一个红色的边框。

立即学习“Java免费学习笔记（深入）”；

* {   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(:first-child) {   padding-top: 20px; }  .active {   border-bottom: 1px solid red; }  nav::-webkit-scrollbar {   display: none; }

原始JavaScript逻辑分析

最初的JavaScript代码旨在为每个菜单项添加点击事件监听器，并在点击时切换其 active 类。

const cards = document.querySelectorAll('.main_list_item'); cards.foreach((card) => {   const num_btn = card.querySelector('.menu_header')   num_btn.addEventListener('click', () => {     if (!card.classList.contains('active')) {       card.classList.add('active');     } else {       card.classList.remove('active');     }   }) })

这段代码的问题在于，当一个菜单项被点击时，它只会根据自身当前是否含有 active 类来决定是添加还是移除该类。它并不会检查或修改其他菜单项的状态。这意味着，如果用户连续点击不同的菜单项，每个被点击的菜单项都会被赋予 active 类，从而导致多个菜单项同时显示红色边框，这与我们期望的“单选”效果不符。

实现单选激活的解决方案

要实现一次只有一个菜单项被激活的效果，核心思想是在激活当前菜单项之前，首先清除所有其他菜单项的激活状态。这可以通过在添加 active 类之前，遍历所有菜单项并移除它们的 active 类来实现。

以下是修改后的JavaScript代码：

const cards = document.querySelectorAll('.main_list_item'); cards.forEach((card) => {   const num_btn = card.querySelector('.menu_header')   num_btn.addEventListener('click', () => {     if (!card.classList.contains('active')) {       // 在添加当前项的active类之前，先清除所有项的active类       cards.forEach((item) => item.classList.remove('active'));       card.classList.add('active');     } else {       // 如果当前项已激活且再次点击，则移除active类（取消激活）       card.classList.remove('active');     }   }) })

代码解析：

const cards = document.querySelectorAll(‘.main_list_item’);: 这一行获取了所有具有 main_list_item 类的dom元素，即所有的主菜单项。
cards.forEach((card) => { … });: 为每个菜单项添加一个点击事件监听器。
num_btn.addEventListener(‘click’, () => { … });: 当 menu_header （菜单项的标题部分）被点击时触发回调函数。
if (!card.classList.contains(‘active’)) { … }: 判断当前点击的菜单项是否已经处于激活状态。
- 如果不包含 active 类（即未激活）：
  - cards.forEach((item) => item.classList.remove(‘active’));: 这是关键的修改点。 它再次遍历所有的 main_list_item 元素，并强制移除它们身上的 active 类。这确保了在新的菜单项被激活之前，所有旧的激活状态都被清除。
  - card.classList.add(‘active’);: 然后，将 active 类添加到当前被点击的菜单项上，使其显示红色边框。
- else { card.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" />   <title>side nav</title>   <link rel="stylesheet" href="style.css"> <!-- 引入CSS文件 --> </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"></menu>           <menu class="sub_menu"></menu>           <menu class="sub_menu"></menu>         </div>       </li>       <li class="main_list_item">         <div class="menu_header">menu two</div>         <div class="menu_body">           <menu class="sub_menu"></menu>           <menu class="sub_menu"></menu>           <menu class="sub_menu"></menu>         </div>       </li>       <li class="main_list_item">         <div class="menu_header">menu three</div>         <div class="menu_body">           <menu class="sub_menu"></menu>           <menu class="sub_menu"></menu>           <menu class="sub_menu"></menu>         </div>       </li>       <li class="main_list_item">         <div class="menu_header">menu four</div>         <div class="menu_body">           <menu class="sub_menu"></menu>           <menu class="sub_menu"></menu>           <menu class="sub_menu"></menu>         </div>       </li>     </menu>   </nav>   <script src="script.JS"></script> <!-- 引入JavaScript文件 --> </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;   cursor: pointer; /* 添加光标指示可点击 */ }  nav#nav_menu_query_off menu li {   color: #f0f0f0; }  nav#nav_menu_query_off menu#main_menu li.main_list_item:not(:first-child) {   padding-top: 20px; }  .active {   border-bottom: 1px solid red; }  nav::-webkit-scrollbar {   display: none; }

JavaScript (script.js)

const cards = document.querySelectorAll('.main_list_item'); cards.forEach((card) => {   const num_btn = card.querySelector('.menu_header')   num_btn.addEventListener('click', () => {     if (!card.classList.contains('active')) {       // 在添加当前项的active类之前，先清除所有项的active类       cards.forEach((item) => item.classList.remove('active'));       card.classList.add('active');     } else {       // 如果当前项已激活且再次点击，则移除active类（取消激活）       card.classList.remove('active');     }   }) })

注意事项与优化

性能考量： 对于包含大量菜单项的复杂导航，每次点击都遍历所有元素并移除类可能会带来轻微的性能开销。但在大多数常见的侧边导航场景中（几十个或几百个菜单项），这种开销通常可以忽略不计。
事件委托： 对于动态生成或数量庞大的列表项，使用事件委托可以进一步优化性能。即只在父元素上添加一个事件监听器，通过事件冒泡来判断是哪个子元素被点击。但这会使JavaScript逻辑稍微复杂一些。
可维护性： 通过CSS类来管理元素的激活状态是一种推荐的做法，它将样式和行为分离，使代码更易于理解和维护。
用户体验： 确保点击区域足够大，并提供视觉反馈（如 cursor: pointer）以提升用户体验。

总结

本教程详细介绍了如何通过修改JavaScript逻辑，实现侧边导航菜单的单选激活效果。核心在于利用 querySelectorAll 获取所有菜单项，并在每次点击激活新项之前，迭代清除所有旧的激活状态。这种模式广泛应用于各种UI组件，确保了界面的清晰性和用户操作的预期性。通过简单的几行代码修改，我们成功地将多选行为修正为符合用户习惯的单选行为。

文章版权归作者所有，未经允许请勿转载。

THE END