修复导航菜单二次点击问题：点击同一菜单仅关闭而非切换

问题出在原代码的执行逻辑：每次点击都会先关闭所有已激活的菜单，然后无条件对当前菜单执行slideToggle和toggleClass，导致重复点击同一激活菜单时，会先被关闭，再被重新展开。

修改后的JavaScript代码 #

$(document).ready(function() {
  $('.navigationV1 ul.top-level-menu .label').on('click', function() {
    const $currentLabel = $(this);
    // 判断当前菜单是否已激活
    if ($currentLabel.hasClass('active')) {
      // 已激活则直接关闭下拉并移除active类
      $currentLabel.removeClass('active').siblings('.drop-down-menu').slideUp();
    } else {
      // 未激活则先关闭其他所有菜单，再展开当前菜单并添加active类
      $('.label.active').removeClass('active').siblings('.drop-down-menu').slideUp();
      $currentLabel.siblings('.drop-down-menu').slideDown();
      $currentLabel.addClass('active');
    }
  });
});

完整可运行代码示例 #

<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>

<style>
.active {
  background-color: #666;
}

.drop-down-menu {
  display: none;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('.navigationV1 ul.top-level-menu .label').on('click', function() {
    const $currentLabel = $(this);
    if ($currentLabel.hasClass('active')) {
      $currentLabel.removeClass('active').siblings('.drop-down-menu').slideUp();
    } else {
      $('.label.active').removeClass('active').siblings('.drop-down-menu').slideUp();
      $currentLabel.siblings('.drop-down-menu').slideDown();
      $currentLabel.addClass('active');
    }
  });
});
</script>

关键逻辑说明 #

• 新增当前点击元素的激活状态判断，避免重复执行toggle操作
• 已激活菜单点击后直接关闭，不再触发展开动作
• 未激活菜单点击时，保留关闭其他菜单的原有功能，确保同一时间仅一个下拉菜单展开

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