点击时隐藏 Twitter Bootstrap 导航折叠

Posted 2023-04-13

技术标签:

【中文标题】点击时隐藏 Twitter Bootstrap 导航折叠【英文标题】：Hide Twitter Bootstrap nav collapse on click 【发布时间】：2013-05-16 20:12:57 【问题描述】：

这不是子菜单下拉，类别是图中的li类：

通过从响应式菜单中选择一个类别（模板只是一页），我想在点击时自动隐藏导航折叠。也可以作为导航使用，因为模板只有一个页。我寻求一个不影响它的解决方案，这里是 html 代码菜单：

    <!-- NAVBAR
  ================================================== -->
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Carousel Demo</a>
      <div class="nav-collapse">
        <ul class="nav" >
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
          <!-- dropdown -->
        </ul>
        <!-- /.nav -->
      </div>
      <!--/.nav-collapse -->
    </div>
    <!-- /.container -->
  </div>
  <!-- /.navbar-inner -->
</div>
<!-- /.navbar -->

【问题讨论】：

我的解决方案是否有效？ @WooCaSh 工作而不是他们的解决方案 custom.js 的顺序是错误的，我注意到 $ ('nav a')。 on ('click', function () 在我的情况下它是一个类，然后 $ ('.nav a'). on ('click', function () 。谢谢你，你帮了我很多！ Close responsive navbar automatically 的可能重复项如果你不想自己在这里比较所有这些解决方案，edit #1 from this answer 是你应该做的。你可以在这里看到我的答案***.com/questions/14248194/… 【参考方案1】：

试试这个：

$('.nav a').on('click', function()
    $('.btn-navbar').click(); //bootstrap 2.x
    $('.navbar-toggle').click(); //bootstrap 3.x by Richard
    $('.navbar-toggler').click(); //bootstrap 4.x
);

【讨论】：

这很好用。谢谢 WooCash。也只是建议添加一个“。”到 $('nav a') => $('.nav a') 之前的代码。 [类选择器缺少一个点“.”] 仅供参考，这并非在所有情况下都有效。如果窗口被调整大小并调出移动菜单，它将默认打开。更新：bootstrap 3 的常用选择器是 .navbar-toggle，所以 $(".navbar-toggle").click(); 这会导致导航栏中出现问题。最好使用 $('.nav-collapse').collapse('hide');点击事件而不是点击切换按钮。当导航栏以“桌面”模式打开时，它会闪烁或关闭，然后在使用时重新打开。【参考方案2】：

这隐藏了导航折叠而不是对其进行动画处理，但与上述答案的概念相同

JS：

$('.nav a').on('click', function () 
    $("#funk").toggleClass('in collapse');
);

HTML：

<div class="navbar-collapse" id="funk">

我更喜欢在单页网站上使用它，因为我使用了已经动画的 localScroll.js。

【讨论】：

【参考方案3】：

$(function() 
    $('.nav a').on('click', function() 
        if($('.navbar-toggle').css('display') !='none')
            $('.navbar-toggle').trigger( "click" );
        
    );
);

【讨论】：

这是一个更好的解决方案，因为它可以防止链接可见时出现故障。在 Bootstrap 4 上，它是 .navbar-toggler 。无论如何，超级有效的代码，谢谢！【参考方案4】：

$(function() 
    $('.nav a').on('click touchstart', function() 
        if($('.navbar-toggle').css('display') !='none')
            $(".navbar-toggle").trigger( "click" );
        
    );
);

// 注意我为移动触摸添加了“touchstart”。 touchstart/end 没有延迟

【讨论】：

【参考方案5】：

我只是在每个链接上复制btn-navbar (data-toggle="collapse" data-target=".nav-collapse.in") 的 2 个属性，如下所示：

<div class="nav-collapse">
  <ul class="nav" >
    <li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse.in">Home</a></li>
    <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse.in">About</a></li>
    <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse.in">Portfolio</a></li>
    <li><a href="#services" data-toggle="collapse" data-target=".nav-collapse.in">Services</a></li>
    <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse.in">Contact</a></li>
  </ul>
</div>

在Bootstrap 4 Navbar 中，in 已更改为show，因此语法为：

data-toggle="collapse" data-target=".navbar-collapse.show"

【讨论】：

将data-toggle 和data-target 添加到是更清洁的解决方案。谢谢。在移动设备上运行良好，但在桌面上也会导致导航栏折叠动画，这是不可取的。 @JamesBrewer 为了避免桌面版的折叠动画，请将.in 添加到数据目标：data-toggle="collapse" data-target=".nav-collapse.in" 不要忘记将 .nav-collapse 替换为 bootstrap 3 的 .navbar-collapse 这应该是公认的答案！感谢您发布它！【参考方案6】：

移动视图：如何在 bootstrap + dropdown + jquery + scrollto 中隐藏切换导航，导航项指向同一页面上的锚点/ID，一个页面模板

我在尝试上述任何解决方案时遇到的问题是它们只折叠子菜单项，而导航菜单没有折叠。

所以我做了我的想法.. 我们可以观察到什么？好吧，每次我们/用户单击滚动链接时，我们都希望页面滚动到该位置，同时折叠菜单以恢复页面视图。

嗯...为什么不将此作业分配给滚动功能？简单:-)

所以在两个代码中

// scroll to top action
$('.scroll-top').on('click', function(event) 
    event.preventDefault();
    $('html, body').animate(scrollTop:0, 'slow');

和

// scroll function
function scrollToID(id, speed)
var offSet = 67;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
    $('html,body').animate(scrollTop:targetOffset, speed);
if (mainNav.hasClass("open")) 
    mainNav.css("height", "1px").removeClass("in").addClass("collapse");
    mainNav.removeClass("open");

我刚刚在两个函数中添加了相同的命令

    if($('.navbar-toggle').css('display') !='none')
    $(".navbar-toggle").trigger( "click" );

（向上述贡献者之一致敬）

像这样（两个卷轴都应该加同样的）

$('.scroll-top').on('click', function(event) 
    event.preventDefault();
    $('html, body').animate(scrollTop:0, 'slow');
if($('.navbar-toggle').css('display') !='none')
    $(".navbar-toggle").trigger( "click" );

);

如果您想看到它的实际效果，请查看recupero dati da NAS

【讨论】：

【参考方案7】：

更优雅的无需重复代码，只需将data-toggle="collapse" 和data-target=".nav-collapse" 属性应用于导航本身：

<nav class="nav-collapse" data-toggle="collapse" data-target=".nav-collapse">
  <ul class="nav">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

超级干净，无需 javascript。效果很好，只要您的 nav a 元素有足够的填充以容纳胖手指，并且当用户点击 nav a 项目时，您不会通过 e.stopPropagation() 阻止点击事件冒泡。

【讨论】：

这是完成此行为的正确引导方式。我建议修改目标以包含 in 类。这将防止桌面版本的行为异常。 data-target=".nav-collapse.in" 更好的一点是它可以与 Angular 4 的 routerLink 一起使用，而其他解决方案则不能！在 Bootstrap 4 中它将是 <div class="collapse navbar-collapse" data-toggle="collapse" data-target=".navbar-collapse">【参考方案8】：

试试这个> Bootstrap 3

非常棒，正是我正在寻找的东西，但是我与 javascript 和引导模式发生了一些冲突，这解决了它。

    $(function() 
    $('.navbar-nav').on('click', function() 
        if($('.navbar-header .navbar-toggle').css('display') !='none')
            $(".navbar-header .navbar-toggle").trigger( "click" );
        
    );
);

希望这会有所帮助。

【讨论】：

【参考方案9】：

最好使用默认的 collapse.js 方法（V3 docs，V4 docs）：

$('.nav a').click(function()
    $('.nav-collapse').collapse('hide');
);

【讨论】：

绝对比使用点击功能好！最好只与您想要更改的内容进行交互，从而将风险降至最低。单击事件可能会导致执行其他不需要的功能。不知道这个折叠方法，谢谢。这是迄今为止我找到的最佳解决方案。谢谢你。我做了一点改进：用这个替换 .nav a 选择器：.nav a:not(.dropdown-toggle) 对我来说，在我的 bootstrap 4 示例页面上，我必须使用 .nav a 而不是 .navbar a 你的意思是.navbar-collapse 而不是.nav-collapse 吗？不，我不知道，因为在问题代码示例中使用了.nav-collapse。【参考方案10】：

更新你的

<li>
  <a href="#about">About</a>
</li>

到

<li>
  <a data-toggle="collapse" data-target=".nav-collapse" href="#about">About</a>
</li>

这个简单的改变对我有用。

参考：https://github.com/twbs/bootstrap/issues/9013

【讨论】：

这应该是公认的答案。与标准引导约定完美配合。同意。这是实现此目的的正确方法。不需要 jQuery。我不明白为什么这得到了这么少的支持/关注。在“标准”Visual Studio 母版页上，这将导致汉堡菜单消失且没有菜单选项。此答案仅适用于特定的菜单配置布局（您未作为示例提供）。这将不再起作用。使用 data-target=".navbar-collapse.in" 与新的引导标准一样。 .in 类是为了防止在桌面上出现动画我在我的情况下使用了这个解决方案，但是我使用了我的div.navbar-collapse元素的ID作为data-target参数。【参考方案11】：

导航应该在用户点击正文的任何位置时关闭 - 而不仅仅是导航元素。说菜单已打开，但用户在页面正文中单击。用户希望看到菜单关闭。

您还必须确保切换按钮可见，否则会在菜单中看到跳转。

$(document).ready(function()  

$("body").click(function(event) 
        // only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called 
         if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible") ) 
            $('.navbar-collapse').collapse('toggle');
        
  );

);

【讨论】：

"如果元素占用了文档中的空间，则认为它们是可见的。"如果 navbar-collapse 在屏幕上不可见，则您的代码旨在防止折叠，但它不可见。不仅效果很好，而且它也是唯一对我有用的解决方案，bootstrap > 3。【参考方案12】：

这就是我的做法。如果有更流畅的方法，请告诉我。

在菜单链接所在的<a> 标签内，我添加了以下代码：

onclick="$('.navbar-toggle').click()"

它保留了幻灯片动画。所以在充分使用时它看起来像这样：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="topNavController as topNav">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="home.html">My Cool Site</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active" onclick="$('.navbar-toggle').click()"><a href="home.html" onclick="$('.navbar-toggle').click()"><i class="fa fa-home"></i> Home</a></li>
            <li><a href="aboutus.html" onclick="$('.navbar-toggle').click()">About Us</a></li>
        </ul>
    </div><!--/.nav-collapse -->
</div>

【讨论】：

【参考方案13】：

Bootstrap3 用户尝试下面给出的代码。它对我有用。

function close_toggle() 
   if ($(window).width() <= 768) 
      $('.nav a').on('click', function()
          $(".navbar-toggle").click();
      );
   
   else 
     $('.nav a').off('click');
   

close_toggle();

$(window).resize(close_toggle);

【讨论】：

【参考方案14】：

这是我用过的最好的解决方案。

$(document).ready(function () 

        $('.nav a').on('click', function () 

            if ($(".btn-navbar").is(":visible") ) $(".btn-navbar").trigger("click");  //bootstrap 2.x
            if ($(".navbar-toggle").is(":visible"))  $(".navbar-toggle").trigger("click");  //bootstrap 3.x
        );

    );

【讨论】：

【参考方案15】：

这对我来说效果很好。它与接受的答案相同，但修复了与桌面/平板电脑视图相关的问题

$('.navbar-nav a').on('click', function () 
        if (window.innerWidth <= 768) 
            $(".navbar-toggle").click();
        
    );

【讨论】：

window.innerWidth 这应该被选为最佳答案。但是，这不适用于下拉菜单。我通过将选择器替换为： $('.navbar-nav').find('a:not(".dropdown-toggle")')【参考方案16】：

Bootstrap 在 Collapse 元素上设置一个 .in 类来触发动画——打开它。如果您只是删除 .in 类，则动画不会运行，但会隐藏元素——这不是您想要的。

运行if 语句以检查是否已在元素上设置默认引导类.in 可能更快。

所以这段代码只是说：

如果我的元素应用了.in 类，则通过触发默认的引导动画将其关闭。否则运行默认的 Bootstrap 动作/打开它的动画

$('#navbar a').on('click touchstart', function() 
    // if .in class is set on element, the element is visible – you want to hide it
    if ($('#navbar').hasClass('in')) 
        // collapse toggle will remove the .in class and animate the element closed 
        $('#navbar').collapse('toggle');
    
)

【讨论】：

【参考方案17】：

我认为最好使用默认 Bootstrap 3 的 collapse.js methods 使用 .navbar-collapse 作为您希望隐藏的可折叠元素，如下所示。

其他解决方案可能会导致您网页中元素的显示或功能方式出现其他不良问题。因此，虽然某些解决方案似乎可以解决您最初的问题，但它很可能会引入其他解决方案，因此请确保在任何解决方案后对您的网站进行全面测试。

要查看此代码的运行情况：

按下面的“运行此代码段”。按“整页”按钮。缩放窗口直到下拉菜单激活。然后选择一个菜单选项，瞧！

干杯！

$('.nav a').click(function() 
  $('.navbar-collapse').collapse('hide');  
);

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="Franciscus Agnew">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap Navbar Collapse Function</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <header>
      <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-expanded="navbar"><span class="sr-only">Toggle navigation</span>Menu <span class="glyphicon glyphicon-chevron-down"></span></button>
            <a class="navbar-brand" href="#">Brand Logo</a>
          </div><!-- navbar-header -->
    
          <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#portfolio">Portfolio</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#staff">Staff</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul><!-- navbar-right -->
          </div><!-- navbar-collapse -->
          
        </div><!-- container -->
      </nav><!-- navbar-fixed-top -->
    </header>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
    
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    
    <!-- Custom Navbar Collapse Script Solution -->
    <script>
      $('.nav a').click(function() 
        $('.navbar-collapse').collapse('hide');  
      );
    </script>
  </body>
</html>

【讨论】：

这比目前接受的答案要好得多。有了那个，我可以在桌面上获得幽灵动画。【参考方案18】：

在 Bootstrap 3.3.6 上测试 - 工作！

$('.nav a').click(function () 
    $('.navbar-collapse').collapse('hide');
);

【讨论】：

【参考方案19】：

然后为每个添加一个 id

<li> add data-target="myMenu" data-toggle="collapse"
<div id="myMenu" class="nav-collapse">
    <ul class="nav">
      <li class="active" data-target="myMenu" data-toggle="collapse"><a href="#home">Home</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#about">About</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#portfolio">Portfolio</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#services">Services</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#contact">Contact</a></li>
    </ul>
</div>

【讨论】：

【参考方案20】：

在每个下拉链接上放置 data-toggle="collapse" 和 data-target=".nav-collapse"，其中 nav-collapse 是您为下拉列表指定的名称。

<ul class="nav" >
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse">About</a></li>
      <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse">Portfolio</a></li>
      <li><a href="#services" data-toggle="collapse" data-target="nav-collapse">Services</a></li>
      <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse">Contact</a></li>
      <!-- dropdown -->
  </ul>

这在具有像移动屏幕这样的下拉菜单的屏幕上完美运行，但在台式机和平板电脑上它会创建一个 flickr。这是因为应用了 .collapsing 类。为了删除 flickr，我创建了一个媒体查询并将溢出隐藏到折叠类中。

@media (min-width: 768px) 
.collapsing 
    overflow: inherit;

【讨论】：

【参考方案21】：

将 data-toggle="collapse" data-target=".navbar-collapse.in" 添加到标签 <a> 对我有用。

<div>

        <button type="button" class="navbar-toggle"  data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
    </div>
            <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-item"><a
                    href="#" data-toggle="collapse" data-target=".navbar-collapse.in" class="nav-link" >Home
                </a></li>
            </ul>
    </div>

【讨论】：

【参考方案22】：

$('.nav a').click(function () 
    $('.navbar-collapse').collapse('hide');
);

【讨论】：

这对我有用。我在每个剑道视图上都有一个导航栏，所以我需要在 beforeShow 事件上关闭它们。【参考方案23】：

Bootstrap 3.* 的另一个快速解决方案可能是：

$( document ).ready(function() 
    //
    // Hide collapsed menu on click
    //
    $('.nav a').each(function (idx, obj) 
        var selected = $(obj);

        selected.on('click', function() 
            if (selected.closest('.collapse.in').length > 0) 
                $('.navbar-toggle').click(); //bootstrap 3.x by Richard
            
        );
    );
);

【讨论】：

【参考方案24】：

我在这里发布了一个适用于 Aurelia 的解决方案：https://***.com/a/41465905/6466378

问题是您不能只将data-toggle="collapse" 和data-target="#navbar" 添加到您的a 元素中。并且 jQuery 不能在 Aurelia 或 Angular 环境中工作。

对我来说最好的解决方案是创建一个自定义属性来监听相应的媒体查询并在需要时添加data-toggle="collapse"attribute：

<a href="#" ... collapse-toggle-if-less768 data-target="#navbar"> ...

Aurelia 的自定义属性如下所示：

import autoinject from 'aurelia-framework';

@autoinject
export class CollapseToggleIfLess768CustomAttribute 
  element: Element;

  constructor(element: Element) 
    this.element = element;
    var mql = window.matchMedia("(min-width: 768px)");
    mql.addListener((mediaQueryList: MediaQueryList) => this.handleMediaChange(mediaQueryList));
    this.handleMediaChange(mql);
  

  handleMediaChange(mediaQueryList: MediaQueryList) 
    if (mediaQueryList.matches) 
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (dataToggle) 
        this.element.attributes.removeNamedItem("data-toggle");
      
     else 
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (!dataToggle) 
        var dataToggle = document.createAttribute("data-toggle");
        dataToggle.value = "collapse";
        this.element.attributes.setNamedItem(dataToggle);

【讨论】：

【参考方案25】：

$("body,.nav a").click(function (event) 

    // only do this if navigation is visible, otherwise you see jump in
    //navigation while collapse() iS called 
    if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible")) 
    $('.navbar-collapse').collapse('toggle');
  
);

【讨论】：

【参考方案26】：

我签入菜单是通过签入类打开的，然后运行代码。

$('.navbar-collapse a').on('click', function()
    if ( $( '.navbar-collapse' ).hasClass('in') ) 
        $('.navbar-toggle').click();
    
);

完美运行。

【讨论】：

【参考方案27】：

对于那些在使用此解决方案时注意到桌面导航栏闪烁的人：

$('.nav a').on('click', function()
    $(".navbar-collapse").collapse('hide');
);

该问题的一个简单解决方案是仅通过检查是否存在“in”来引用折叠的导航栏：

$('.navbar-collapse .nav a').on('click', function()
    if($('.navbar-collapse').hasClass('in'))
    
        $(".navbar-collapse").collapse('hide');
    
);

这会在导航栏处于移动模式时折叠导航栏，但不会影响桌面版本。这避免了许多人在桌面版本上目睹的闪烁。

此外，如果您有一个带有 下拉菜单 的导航栏，您将无法看到这些，因为一旦您点击它们，导航栏就会被隐藏，所以如果您有下拉菜单 (像我一样！），使用以下内容：

$('.nav a').on('click', function(e)
    if(!$(this).closest('li').hasClass('dropdown') & $( '.navbar-collapse').hasClass('in'))
    
        $(".navbar-collapse").collapse('hide');
    
);

这会查找在 DOM 中单击的链接上方是否存在下拉类，如果存在，则该链接打算启动下拉菜单，因此该菜单并未隐藏。当您单击下拉菜单中的链接时，导航栏将正确隐藏。

【讨论】：

【参考方案28】：

100% 工作：-

在 HTML 中添加

<div id="myMenu" class="nav-collapse">

Javascript

 $(function() 
 var navMain = $("#myMenu");
 navMain.on("click", "a", null, function () 
     navMain.collapse('hide');
 );
);

【讨论】：

谢谢你！它有效【参考方案29】：

我在 Bootstrap 4 上，使用带有固定顶部导航的 fullPage.js，并尝试了此处列出的所有内容，但结果好坏参半。

尝试了最好的，干净的方式：

data-toggle="collapse" data-target=".navbar-collapse.show"

菜单会折叠，但 href 链接不会指向任何地方。

尝试了其他合乎逻辑的方法：

$('myClickableElements').on('click touchstart', function()
  $(".navbar-collapse.show").collapse('hide');
  // or
  $(".navbar-collapse.show").collapse('toggle');
  // or
  $('.navbar-toggler').click()
);

由于 touchstart 事件会出现一些奇怪的行为：单击的按钮最终不是我实际单击的按钮，因此会破坏链接。另外，它会将 .show 类添加到我导航中的其他一些不相关的下拉列表中，从而导致一些更奇怪的东西。

试图将 div 更改为 li 尝试了 e.preventDefault() 和 e.stopPropagation() 试了又试了

什么都行不通。

所以，相反，我有（到目前为止）这样做的奇妙想法：

$(window).on('hashchange',function()
   $(".navbar-collapse.show").collapse('hide');
);

我已经在那个 hashchange 函数中有东西了，我只需要添加这一行。

它实际上完全符合我的要求：当哈希值发生变化时折叠菜单（即发生了指向其他地方的点击）。这很好，因为我现在可以在我的菜单中添加不会折叠的链接。

谁知道呢，也许这会对我这种情况的人有所帮助！

感谢所有参与该主题的人，这里有很多信息可以学习。

【讨论】：

【参考方案30】：

在大多数情况下，您只想在切换按钮可见时调用切换函数...

if ($('.navbar-toggler').is(":visible")) $('.navbar-toggler').click();

【讨论】：

以上是关于点击时隐藏 Twitter Bootstrap 导航折叠的主要内容，如果未能解决你的问题，请参考以下文章

Twitter Bootstrap 选项卡：在悬停时显示，在鼠标输出时隐藏

页面标签上的 Twitter Bootstrap：不隐藏标签内容

在悬停时制作 Twitter Bootstrap 菜单下拉菜单，而不是轻松点击（解决方案）

jQuery 在 Twitter Bootstrap 模式中显示/隐藏

选中复选框时，Twitter Bootstrap 3 崩溃

Twitter bootstrap 和 Angular.js 之间真正的（或隐藏的）区别