移动端点击菜单链接后汉堡图标状态未同步切换问题求助

问题核心是：点击汉堡按钮时，框架会给按钮添加is-active类实现图标样式切换（汉堡→X），但点击带mobile-toggle-nav类的菜单链接时，仅触发了菜单关闭逻辑，未同步修改汉堡按钮的is-active类，导致图标停留在X样式。

以下是几种可行的解决方案：

方案1：复用汉堡按钮的点击逻辑 #

直接模拟点击汉堡按钮，复用原有切换逻辑，确保状态完全同步：

$(".btn-show").click(function(e) {
  e.preventDefault();
  el = $(this).data('element');
  $(el).show();
  $("section > div").not(el).hide();
  
  // 触发汉堡按钮的点击事件，同步图标状态
  $('.hamburger.mobile-toggle-nav').trigger('click');
});

方案2：直接切换图标状态类 #

如果不想触发完整的点击事件，可直接操作is-active类来切换图标：

$(".btn-show").click(function(e) {
  e.preventDefault();
  el = $(this).data('element');
  $(el).show();
  $("section > div").not(el).hide();
  
  // 切换汉堡按钮的active类，同步图标样式
  $('.hamburger.mobile-toggle-nav').toggleClass('is-active');
});

方案3：优化版（仅在需要时切换） #

添加状态判断，只在汉堡图标处于X状态时才切换回汉堡样式，避免多余操作：

$(".btn-show").click(function(e) {
  e.preventDefault();
  el = $(this).data('element');
  $(el).show();
  $("section > div").not(el).hide();
  
  const hamburgerBtn = $('.hamburger.mobile-toggle-nav');
  // 仅当图标处于active状态（X样式）时切换回汉堡样式
  if (hamburgerBtn.hasClass('is-active')) {
    hamburgerBtn.removeClass('is-active');
  }
});

原理说明：ArchitectUI的汉堡图标样式完全依赖is-active类——添加该类时显示X，移除时显示初始汉堡样式。通过在菜单链接的点击事件中同步操作这个类，就能让图标状态与菜单的展开/关闭状态保持一致。

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