Bootstrap 3汉堡菜单问题：选中后高亮残留且无法自动收起

我之前也碰到过Bootstrap 3汉堡菜单这俩糟心问题！给你分享下我亲测有效的解决办法，连脚本放置位置的坑也一起说清楚～

问题1：选中菜单项后再次打开菜单，所有项仍高亮 #

这个问题本质是**active类没有被正确移除**——当你点击某菜单项时，可能只给当前项加了active，但没把其他项的active类去掉；或者页面跳转后，菜单的状态没有重置。

你可以用这段jQuery脚本处理：

$(document).ready(function() {
  // 点击汉堡菜单中的菜单项时
  $('.navbar-nav li a').click(function() {
    // 移除所有菜单项的active类
    $('.navbar-nav li').removeClass('active');
    // 给当前点击的父元素li添加active类
    $(this).parent('li').addClass('active');
  });
});

如果是页面跳转后仍保留所有高亮，还要确保在页面加载时，只给当前页面对应的菜单项加active，比如通过URL匹配：

$(document).ready(function() {
  // 页面加载时，根据URL设置当前菜单项为active
  var currentUrl = window.location.href;
  $('.navbar-nav li a').each(function() {
    if ($(this).attr('href') === currentUrl || currentUrl.indexOf($(this).attr('href')) !== -1) {
      $('.navbar-nav li').removeClass('active');
      $(this).parent('li').addClass('active');
    }
  });
});

问题2：移动设备选中菜单项后菜单不自动收起 #

Bootstrap 3的汉堡菜单（navbar-collapse）默认没有点击菜单项自动折叠的功能，需要手动触发折叠事件。把下面的代码加到刚才的脚本里就行：

$(document).ready(function() {
  $('.navbar-nav li a').click(function() {
    // 移除所有active类
    $('.navbar-nav li').removeClass('active');
    $(this).parent('li').addClass('active');
    
    // 触发菜单折叠（针对移动设备的汉堡菜单）
    var navbarCollapse = $('.navbar-collapse');
    if (navbarCollapse.hasClass('in')) {
      navbarCollapse.collapse('hide');
    }
  });
});

关键：脚本放置位置的坑 #

你之前试了脚本没效果，大概率是位置不对！必须满足这两个条件：

• 脚本要放在jQuery和Bootstrap的JS文件之后（因为依赖这两个库）
• 最好包裹在$(document).ready()里，或者放在</body>标签的前一行（确保DOM已经加载完成）

举个正确的HTML结构示例：

<!-- 先引入jQuery -->
<script src="jquery.min.js"></script>
<!-- 再引入Bootstrap JS -->
<script src="bootstrap.min.js"></script>
<!-- 最后放你的自定义脚本 -->
<script>
$(document).ready(function() {
  // 上面的代码放在这里
});
</script>
</body>

这样处理后，两个问题应该都能解决啦～

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