单击时隐藏Twitter Bootstrap导航折叠

这不是一个子菜单下拉列表，类别是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 -->

试试这个：

$('.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
});

我只是在每个链接上复制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"

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

最好使用默认的crash.js方法（V3文档，V4文档）：

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

无需重复代码，更优雅的方法是将data-toggle="collapse"and 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元素具有足够的填充空间来容纳粗壮的手指，并且效果不会因e.stopPropagation()用户单击nav a项目而引起的点击事件冒泡，效果就很好。

更新你的

<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

每当用户单击身体上的任何位置时，都应关闭导航，而不仅仅是导航元素。说菜单打开，但是用户单击页面正文。用户希望看到菜单关闭。

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

$(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');
        }
  });

});

在Bootstrap 3.3.6上进行了测试-正常工作！

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

试试这个> Bootstrap 3

精妙地满足了我的需求，但是我与javascript和bootstrap模式发生了一些冲突，从而解决了该问题。

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

希望这可以帮助。

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

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

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

其他解决方案可能会导致元素在网页中的显示或功能方式出现其他意外问题。因此，尽管某些解决方案似乎可以解决您的最初问题，但很可能会引入其他解决方案，因此请确保在进行任何修复后都对站点进行了彻底的测试。

要查看此代码，请执行以下操作：

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

干杯!

$('.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>

在每个下拉链接上，输入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>

在具有下拉菜单（如移动屏幕）的屏幕上，此功能可完美运行，但在台式机和平板电脑上，它会产生闪烁感。这是因为应用了.collapsing类。为了删除flickr，我创建了一个媒体查询，并在隐藏的类中插入了隐藏的溢出。

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

将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>

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

<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>

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

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

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

$(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
        });

    });

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

$('.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中单击的链接上方是否存在下拉列表类（如果存在），则该链接打算启动一个下拉菜单，因此该菜单未被隐藏。当您单击下拉菜单中的链接时，导航栏将正确隐藏。

$("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');
  }
});

100％工作：-

添加HTML

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

Java脚本

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

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

JS：

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

HTML：

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

我更喜欢在单页站点上这样做，因为我使用的是已经动画的localScroll.js。

移动视图：如何隐藏在拨动导航引导+下拉菜单+的jQuery + scrollto导航项目，它指向锚/在同一页上的ID，一个页面模板

我尝试使用上述任何解决方案的问题是，它们仅折叠子菜单项，而导航菜单不会折叠。

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

好吧...为什么不将此工作分配给scrollto函数？简单 ：-）

所以在两个代码中

// 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

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);

Bootstrap .in在Collapse元素上设置一个类来触发动画–将其打开。如果仅删除.in类，则动画不会运行，但会隐藏元素-并非完全是您想要的。

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

所以这段代码只是说：

如果我的元素.in应用了该类，请通过触发默认的Bootstrap动画将其关闭。否则，运行默认的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');
    }
})

然后为每个添加一个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>

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
            }
        });
    });
});

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

问题是您不能只添加data-toggle="collapse"和添加data-target="#navbar"元素。jQuery在Aurelia或Angular环境中无法正常工作。

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

<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);
      }
    }
  }
}

我在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函数中有了东西，因为我只需要添加这一行。

它实际上确实可以实现我想要的功能：当哈希改变时（即发生在其他地方的单击），折叠菜单。这很好，因为我现在可以在菜单中包含不会折叠它的链接。

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

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

在大多数情况下，仅当切换按钮可见时才需要调用切换功能。

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

我签入菜单是通过检查“中”类来打开的，然后运行代码。

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

完美地工作。