求助：手风琴式导航菜单Chevron图标切换逻辑优化

核心思路 #

先统一重置所有非当前点击菜单的状态（收起子菜单、图标切回向右），再单独处理当前菜单的展开/收起及对应图标切换，确保视觉状态与功能逻辑完全同步。

假设你的HTML结构如下（可根据实际调整类名） #

<ul class="accordion-nav">
  <li class="main-menu">
    <button class="menu-trigger">
      主菜单1
      <i class="chevron fa fa-chevron-right"></i>
    </button>
    <ul class="sub-menu">
      <li>子菜单选项1</li>
      <li>子菜单选项2</li>
    </ul>
  </li>
  <li class="main-menu">
    <button class="menu-trigger">
      主菜单2
      <i class="chevron fa fa-chevron-right"></i>
    </button>
    <ul class="sub-menu">
      <li>子菜单选项3</li>
      <li>子菜单选项4</li>
    </ul>
  </li>
</ul>

优化后的jQuery代码 #

$(function() {
  // 绑定主菜单触发按钮点击事件
  $('.menu-trigger').on('click', function() {
    const $currentMenu = $(this).closest('.main-menu');
    const $currentChevron = $(this).find('.chevron');
    const isCurrentExpanded = $currentMenu.hasClass('expanded');

    // 1. 重置所有其他主菜单的状态
    $('.main-menu').not($currentMenu)
      .removeClass('expanded')
      .find('.sub-menu').slideUp();
    $('.main-menu').not($currentMenu)
      .find('.chevron')
      .removeClass('fa-chevron-down')
      .addClass('fa-chevron-right');

    // 2. 切换当前主菜单的状态
    if (isCurrentExpanded) {
      // 当前已展开，点击后收起
      $currentMenu.removeClass('expanded');
      $currentMenu.find('.sub-menu').slideUp();
      $currentChevron.removeClass('fa-chevron-down').addClass('fa-chevron-right');
    } else {
      // 当前未展开，点击后展开
      $currentMenu.addClass('expanded');
      $currentMenu.find('.sub-menu').slideDown();
      $currentChevron.removeClass('fa-chevron-right').addClass('fa-chevron-down');
    }
  });
});

配套基础CSS（确保初始状态正确） #

.sub-menu {
  display: none;
  margin-left: 1rem;
}

/* 可选：用类名控制展开状态的样式，增强可维护性 */
.expanded .sub-menu {
  display: block;
}

优化说明 #

1. 状态统一重置：先处理所有非当前菜单的状态，避免出现多个菜单同时展开、图标状态混乱的问题
2. 类名标记状态：用expanded类统一标记展开状态，后续扩展样式或逻辑时只需操作该类即可
3. 逻辑拆分清晰：将“重置全局”和“切换当前”拆分为两个步骤，代码可读性和可维护性更强
4. 图标与状态绑定：确保图标切换完全跟随菜单的展开/收起状态，视觉反馈准确

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