您不必向已包含在引导程序折叠选项中的内容添加任何额外的 javascript。相反，只需在菜单列表项中包含数据切换和数据目标选择器，就像使用导航栏切换按钮一样。所以对于您的产品菜单项，它看起来像这样

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

然后您需要为每个菜单项重复数据切换和数据目标选择器

编辑！！！ 为了修复溢出问题并在此修复程序上闪烁，我添加了更多代码来解决此问题，但仍然没有任何额外的 javascript。这是新代码：

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

这是在工作http://jsfiddle.net/jaketaylor/84mqazgq/

这将使您的切换和目标选择器特定于屏幕尺寸并消除较大菜单上的故障。如果有人仍然遇到故障问题，请告诉我，我会找到解决方法。谢谢

编辑：在引导程序 v4.1.3 中，我无法使用可见/隐藏类。代替hidden-xs使用d-none d-sm-block和代替visible-xs使用d-block d-sm-none。

我已经让它与动画一起工作了！

html 中的菜单：

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
 </div>

将导航中所有 a 元素的单击事件绑定到折叠菜单（Bootstrap 折叠插件）：

 $(function(){ 
     var navMain = $("#nav-main");
     navMain.on("click", "a", null, function () {
         navMain.collapse('hide');
     });
 });

编辑 为了使它更通用，我们可以使用以下代码片段

 $(function(){ 
     var navMain = $(".navbar-collapse"); // avoid dependency on #id
     // "a:not([data-toggle])" - to avoid issues caused
     // when you have dropdown inside navbar
     navMain.on("click", "a:not([data-toggle])", null, function () {
         navMain.collapse('hide');
     });
 });

我认为你是工程师。。

    $('.navbar-collapse ul li a').click(function(){ 
            $('.navbar-toggle:visible').click();
    });

编辑：要处理子菜单，请确保其切换锚具有下拉切换类。

    $(function () { 
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { 
                    $('.navbar-toggle:visible').click(); 
            }); 
    });

编辑 2：添加对手机触摸的支持。

    $(function () {
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
                    $('.navbar-toggle:visible').click();
            });
    });

我真的很喜欢 Jake Taylor 的想法，即无需额外的 JavaScript 并利用 Bootstrap 的折叠切换。我发现您可以通过data-target稍微修改选择器以包含in类来修复菜单未处于折叠模式时出现的“闪烁”问题。所以它看起来像这样：

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>

我没有用嵌套的下拉菜单/菜单测试它，所以 YMMV。

只是为了完成，在 Bootstrap 4.0.0-beta 中使用.show为我工作......

<li>
  <a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>