添加rel="history"后点击菜单链接无法关闭菜单的问题求助

问题核心是无刷新页面切换时，DOM状态不会自动重置——你只解决了脚本持续运行的问题，但没给菜单链接添加关闭逻辑，而且页面切换后原有的菜单状态类（active、open）会保留下来。

直接给你两种实用解决思路：

方法一：点击菜单链接时主动关闭菜单 #

给所有带rel="history"的菜单链接绑定点击事件，点击时直接移除菜单的展开状态类，符合常规交互逻辑：

$(function() {
  // 原有的菜单切换逻辑
  $(".toggle-menu").click(function() {
    $(this).toggleClass("active");
    $('.menu-drawer').toggleClass("open");
  });

  // 新增：点击菜单链接时关闭菜单
  $(".menu-drawer a[rel='history']").click(function() {
    $(".toggle-menu").removeClass("active");
    $('.menu-drawer').removeClass("open");
  });
});

方法二：监听页面切换完成事件（兜底方案） #

如果你的无刷新切换有对应的完成回调（比如自定义的history切换事件），可以在页面切换完成后强制重置菜单状态，防止极端情况（比如链接通过非点击方式触发）：

// 假设你的无刷新切换完成后会触发'pageChangeComplete'事件
$(document).on('pageChangeComplete', function() {
  $(".toggle-menu").removeClass("active");
  $('.menu-drawer').removeClass("open");
});

如果没有现成事件，也可以直接在触发页面切换的逻辑代码末尾添加状态重置语句。

额外注意：检查CSS中.menu-drawer.open和.menu-drawer的样式规则，确保移除open类后菜单能正确收起，避免样式冲突导致的状态异常。

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