本文介绍如何在用户点击移动端菜单链接后，不仅隐藏侧边栏菜单，还同步重置汉堡按钮（从“×”状态恢复为三条横线），确保 UI 状态一致性。核心在于移除 hamburger 按钮的 is-active 类。
本文介绍如何在用户点击移动端菜单链接后，不仅隐藏侧边栏菜单，还同步重置汉堡按钮（从“×”状态恢复为三条横线），确保 ui 状态一致性。核心在于移除 hamburger 按钮的 `is-active` 类。
在基于 ArchitectUI 或类似 Bootstrap + jQuery 的响应式管理后台中，移动端常使用「汉堡菜单」（hamburger menu）切换导航栏显隐。其交互逻辑通常依赖 CSS 类（如 is-active）控制图标变形（三条横线 ↔ “×”），同时配合 JavaScript 显示/隐藏侧边栏。
你当前的代码已能通过 .btn-show 点击切换内容区（如 #minhaDiv6），并借助 mobile-toggle-nav 类触发菜单收起——但存在一个关键遗漏：菜单收起后，汉堡图标未同步还原。这是因为菜单的展开/收起状态由 is-active 类控制，而该类仅在点击汉堡按钮本身时被 main.js 自动添加或移除；当用户点击菜单内链接（如 .btn-show）间接关闭菜单时，main.js 并未感知此操作，因此 is-active 类残留，图标仍显示为“×”。
✅ 正确解法是在 .btn-show 的点击事件处理函数中，主动移除汉堡按钮上的 is-active 类：
$(".btn-show").click(function(e) {
e.preventDefault();
const el = $(this).data('element');
$(el).show();
$("section > div").not(el).hide();
// ? 关键修复：点击菜单项时，重置汉堡图标状态
$("button.hamburger").removeClass("is-active");
});
⚠️ 注意事项：
- 确保选择器 button.hamburger 准确匹配你的汉堡按钮（当前 HTML 中为
- 若页面存在多个汉堡按钮（如顶部+底部），建议添加更精确的上下文限定，例如 $(".app-header__mobile-menu button.hamburger")；
- 此方案与 ArchitectUI 默认行为兼容，无需修改 main.js，属于轻量级增强；
- 若后续引入动画过渡，可额外添加 setTimeout 延迟移除类以避免视觉闪烁（一般非必需）。
? 总结：汉堡图标的视觉状态应与菜单实际展开状态严格一致。点击导航链接作为“菜单关闭动作”的一种，必须同步更新图标类名。一行 removeClass("is-active") 即可闭环交互逻辑，提升移动端用户体验的专业性与一致性。
