点击锚点链接时Bootstrap移动端侧边菜单不自动关闭的解决求助

解决方案 #

你可以直接在现有jQuery引入后添加如下代码即可实现点击锚点自动关闭移动端菜单的效果：

$(document).ready(function() {
  // 监听移动端侧边栏内所有锚点链接的点击事件
  $('.site-mobile-menu a[href^="#"]').click(function() {
    // 模拟点击菜单切换按钮，触发内置的关闭菜单逻辑
    $('.js-menu-toggle').click();
  });
});

补充说明 #

如果上述方案出现菜单点了反而不关闭的情况，大概率是你的主题自定义了菜单激活状态的类名，可替换为手动关闭的逻辑：

1. 先手动打开一次移动端菜单，用F12开发者工具查看body标签和.site-mobile-menu标签上新增的类名（常见为menu-open、active、show）
2. 替换为以下代码，把对应类名改成你实际查到的即可：

$(document).ready(function() {
  $('.site-mobile-menu a[href^="#"]').click(function() {
    // 移除菜单激活状态
    $('.site-mobile-menu').removeClass('active');
    // 移除body上的菜单打开标记，恢复页面滚动
    $('body').removeClass('menu-open');
  });
});

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