如何在打开新手风琴面板时移除其他元素的active类

问题说明 #

当前手风琴点击带menu-link类的a标签时，能展开相邻子菜单并收起其他子菜单，但存在缺陷：已有元素处于active状态时，点击新元素不会自动移除旧元素的active类，只有再次点击旧元素才会移除。需要实现：

• 点击某一menu-link时，自动移除其他所有menu-link的active类
• 再次点击当前元素时，可切换自身的active类（实现子菜单的展开/收起切换）

修改后的代码实现 #

JavaScript

const menuLinks = $(".menu-link");
const subMenus = $(".sub-menu");

menuLinks.click(function(e) {
  e.preventDefault();
  const $currentLink = $(this);
  const $currentSubMenu = $currentLink.next(".sub-menu");
  const isActive = $currentLink.hasClass("active");

  // 当前元素已激活：直接切换类并收起子菜单
  if (isActive) {
    $currentLink.toggleClass("active");
    $currentSubMenu.slideUp();
    return;
  }

  // 清除所有旧激活状态
  menuLinks.removeClass("active");
  // 收起所有子菜单
  subMenus.slideUp();
  // 激活当前元素并展开对应子菜单
  $currentLink.addClass("active");
  $currentSubMenu.slideDown();
});

CSS（无需改动）

.sub-menu {
  display: none;
}

HTML（无需改动）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  <a class="menu-link" href="#">Link 1</a>
  <ul class="sub-menu">
    <li>
      <a class="menu-link" href="#">Sub menu link 1</a>
    </li>
  </ul>
</li>

<li>
  <a class="menu-link" href="#">Link 2</a>
  <ul class="sub-menu">
    <li>
      <a class="menu-link" href="#">Sub menu link 2</a>
    </li>
  </ul>
</li>

<li>
  <a class="menu-link" href="#">Link 3</a>
  <ul class="sub-menu">
    <li>
      <a class="menu-link" href="#">Sub menu link 3</a>
    </li>
  </ul>
</li>

核心改动解析 #

• 增加状态判断：先检查当前点击元素是否已激活，若已激活则直接切换状态并收起子菜单，实现点击关闭的交互
• 全局清除旧状态：当点击未激活的元素时，先移除所有menu-link的active类，确保旧激活元素的样式被重置
• 统一交互流程：先收起所有子菜单，再激活当前元素并展开对应子菜单，避免出现菜单展开状态混乱的情况

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