点击鼠标时切换和添加元素类名的问题求助

嘿，我来帮你搞定这个菜单类名切换的问题～

首先我先理清楚你的需求：点击对应的<li>元素时，要给它里面的<a>标签加上subdrop active类，同时给这个<li>本身加上active类，而且应该是每次只有一个菜单处于激活状态对吧？

先给你补全一下合理的HTML结构（看你贴的代码没写完，应该是类似这样的）：

<ul class="menu-list">
  <li class="submenu">
    <a href="#item1">菜单项1</a>
  </li>
  <li class="submenu">
    <a href="#item2">菜单项2</a>
  </li>
  <li class="submenu">
    <a href="#item3">菜单项3</a>
  </li>
</ul>

接下来分两种方案给你实现，你可以根据自己用的技术选择：

原生JavaScript方案（无需依赖第三方库） #

这个方案兼容性好，不用额外引入资源：

// 获取所有带submenu类的li元素
const allSubmenuItems = document.querySelectorAll('li.submenu');

// 给每个li绑定点击事件
allSubmenuItems.forEach(item => {
  item.addEventListener('click', function(event) {
    // 如果你不希望a标签触发跳转，加上这行阻止默认行为
    event.preventDefault();

    // 第一步：先移除所有li的active类、所有a的subdrop/active类
    // 避免多个菜单同时显示激活状态
    allSubmenuItems.forEach(li => {
      li.classList.remove('active');
      const link = li.querySelector('a');
      link.classList.remove('subdrop', 'active');
    });

    // 第二步：给当前点击的li添加active类
    this.classList.add('active');

    // 第三步：给当前li里的a标签添加subdrop和active类
    const currentLink = this.querySelector('a');
    currentLink.classList.add('subdrop', 'active');
  });
});

jQuery方案（如果你已经引入了jQuery） #

代码会更简洁直观：

// 给所有submenu类的li绑定点击事件
$('li.submenu').on('click', function(event) {
  // 阻止a标签默认跳转（如果需要的话）
  event.preventDefault();

  // 移除所有元素的激活类
  $('li.submenu').removeClass('active');
  $('li.submenu a').removeClass('subdrop active');

  // 给当前点击的元素添加激活类
  $(this).addClass('active');
  $(this).find('a').addClass('subdrop active');
});

这里要提个关键细节：一定要先移除其他元素的激活类，不然之前点击过的菜单会一直保留active状态，就会出现多个激活项，不符合常规的菜单交互逻辑哦～

备注：内容来源于stack exchange，提问作者VIVEK ROBIN KUJUR