如何高效正确处理多级嵌套列表菜单的点击事件与样式切换？

第一步：修正HTML结构 #

原代码的嵌套存在规范问题，二级<ul>必须放在对应一级<li>内部，否则会导致后续JS无法正确识别层级关系。修正后的代码如下：

<ul class="menu">
  <li>
    <a href="#" link_value="item 1">First level Menu item 1</a>
    <ul>
      <li>
        <a href="#" link_value="item 2-1">Second level Menu item 1</a>
        <ul>
          <li><a href="#" link_value="item 3-2-1">Third level Menu item 1</a></li>
          <li><a href="#" link_value="item 3-2-2">Third level Menu item 2</a></li>
          <li><a href="#" link_value="item 3-2-3">Third level Menu item 3</a></li>
        </ul>
      </li>
      <li><a href="#" link_value="item 2-2">Second level Menu item 2</a></li>
      <li><a href="#" link_value="item 2-3">Second level Menu item 3</a></li>
    </ul>
  </li>
  <li><a href="#" link_value="item 2">First level Menu item 2</a></li>
  <li><a href="#" link_value="item 3">First level Menu item 3</a></li>
</ul>

第二步：添加激活状态样式 #

给active类设置基础样式，方便直观看到激活效果：

.menu li.active {
  background-color: #f0f0f0;
}
.menu li.active a {
  color: #2c3e50;
  font-weight: bold;
}

第三步：编写JavaScript逻辑 #

// 定义你需要调用的业务函数
function my_function(linkValue) {
  // 这里替换成你的实际业务逻辑，比如打印参数做调试
  console.log('当前选中菜单值：', linkValue);
}

// 页面DOM加载完成后执行绑定操作
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有菜单内的a标签
  const menuLinks = document.querySelectorAll('.menu a');
  
  // 遍历绑定点击事件
  menuLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      // 阻止a标签默认跳转（避免href="#"导致页面回到顶部）
      e.preventDefault();
      
      // 获取自定义属性的取值并调用目标函数
      const linkValue = this.getAttribute('link_value');
      my_function(linkValue);
      
      // 先移除所有菜单li的active类，清除旧的激活状态
      document.querySelectorAll('.menu li').forEach(li => {
        li.classList.remove('active');
      });
      
      // 向上遍历父元素，给当前项的所有父级li添加active类
      let currentParent = this.parentElement;
      while (currentParent && !currentParent.classList.contains('menu')) {
        if (currentParent.tagName === 'LI') {
          currentParent.classList.add('active');
        }
        currentParent = currentParent.parentElement;
      }
    });
  });
});

逻辑说明 #

• 用DOMContentLoaded确保DOM加载完成后再绑定事件，避免出现找不到元素的问题。
• 点击时先阻止默认跳转行为，避免页面滚动。
• 通过getAttribute读取自定义属性值，传入业务函数。
• 先清除所有菜单项的激活状态，再给当前项及其所有父级菜单添加激活类，保证只有当前层级链处于激活状态。

内容的提问来源于stack exchange，提问作者jeromebg