如何在展开当前菜单时通过slideToggle关闭其他菜单？

当前导航已实现点击切换自身下拉菜单和active类的功能，但缺少点击菜单项时自动关闭其他展开菜单并移除其active类的逻辑，以下是修改方案：

实现思路 #

• 点击菜单项时，先选中所有当前点击项之外的.label元素
• 关闭这些元素对应的下拉菜单，并移除它们的active类
• 最后正常处理当前点击项的下拉菜单切换和active类状态切换

修改后的JavaScript代码 #

$(document).ready(function() {
  $('.navigationV1 ul.top-level-menu .label').on('click', function() {
    // 缓存当前点击的菜单项
    const $currentLabel = $(this);
    // 筛选出所有非当前点击的菜单项
    const $otherLabels = $('.navigationV1 ul.top-level-menu .label').not($currentLabel);
    
    // 关闭其他菜单的下拉框，移除active类
    $otherLabels.siblings('.drop-down-menu').slideUp();
    $otherLabels.removeClass('active');
    
    // 切换当前菜单的下拉状态与激活类
    $currentLabel.siblings('.drop-down-menu').slideToggle();
    $currentLabel.toggleClass('active');
  });
});

CSS代码（保留原样式） #

.active {
  background-color: #666;
}

.drop-down-menu {
  display: none;
}

HTML代码（保留原结构） #

<div class="navigationV1 top-level-menu label">
  <div class="descendant-links-container">
    <ul class="top-level-menu">
      <li>
        <a class="label">Menu 1</a>
        <ul class="drop-down-menu">
          <li>
            <a>Drop-down-menu 1</a>
          </li>
        </ul>
      </li>
      <li>
        <a class="label">Menu 2</a>
      </li>
      <li>
        <a class="label">Menu 3</a>
        <ul class="drop-down-menu">
          <li>
            <a>Drop-down-menu 2</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

修改后，每次点击菜单项时，系统会先收起所有其他展开的菜单并取消激活状态，再处理当前菜单的展开/收起切换，完全符合需求。

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