Bootstrap移动端导航栏点击菜单项折叠，桌面端触发异常求解决方案

嘿，这个问题我之前也碰到过！你现在的困扰是因为Bootstrap的collapse插件不会自动区分屏幕尺寸——不管是手机还是桌面，只要点击带data-toggle="collapse"的元素，它就会触发折叠效果。咱们来解决它，给你几个实用的方案：

方案一：用JavaScript判断屏幕尺寸（推荐） #

这种方法最简洁，只在移动端（屏幕宽度小于768px，Bootstrap3默认断点）点击导航项时才折叠导航栏。

步骤： #

1. 给导航项的<a>标签加一个统一的类，比如nav-link-collapse，同时去掉原来的data-toggle和data-target属性：

<li><a href="#" class="nav-link-collapse">About</a></li>
<li><a href="#" class="nav-link-collapse">Survey</a></li>

2. 添加一段JavaScript代码，监听这些导航项的点击事件，仅在小屏幕下触发折叠：

$('.nav-link-collapse').on('click', function() {
  // 检测当前窗口宽度
  const windowWidth = $(window).width();
  // Bootstrap3默认移动端断点是768px，小于这个值时隐藏导航栏
  if (windowWidth < 768) {
    $('#navbar-collapse-1').collapse('hide');
  }
});

这样一来，桌面端点击导航项不会触发折叠，只有移动端点击才会自动收起导航栏，完美符合需求～

方案二：用Bootstrap响应式类区分显示（简单直接） #

如果不想写JS，可以利用Bootstrap的响应式工具类，为移动端和桌面端分别提供不同的导航链接：

<li>
  <!-- 仅在移动端显示，带折叠触发属性 -->
  <a href="#" data-toggle="collapse" data-target="#navbar-collapse-1" class="visible-xs">About</a>
  <!-- 仅在桌面端显示，不带折叠触发 -->
  <a href="#" class="hidden-xs">About</a>
</li>
<li>
  <a href="#" data-toggle="collapse" data-target="#navbar-collapse-1" class="visible-xs">Survey</a>
  <a href="#" class="hidden-xs">Survey</a>
</li>

这种方法的缺点是会重复写导航链接，但优点是不用额外写JS，适合快速解决问题。

原代码问题根源 #

你原来给<a>标签加的data-toggle="collapse"和data-target是全局生效的——Bootstrap的collapse插件只要检测到这些属性，不管屏幕大小都会执行折叠逻辑，所以桌面端点击也会收起导航栏。上面的方案就是通过区分屏幕尺寸或不同场景的元素，来避免这个问题。

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