隐藏Twitter的Bootstrap导航点击崩溃

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

通过从响应菜单中select一个类别（模板只是一个页面），我想隐藏导航自动点击时折叠。 也漫步作为导航使用，因为该模板只有一个页面。 我寻求一个不影响它的解决scheme，这里是菜单的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 --> 

Answer 1

尝试这个：

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

Answer 2

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

Answer 3

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

Answer 4

最好使用默认的collapse.js方法 ：

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

Answer 5

如果没有重复的代码，更简单的方法是简单地将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()冒泡。

Answer 6

更新你的

 <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

Answer 7

任何时候用户点击身体的任何地方都不应该closures导航，而不仅仅是导航元素。 说菜单打开，但用户点击页面主体。 用户期望看到菜单closures。

您还必须确保切换button是可见的，否则在菜单中会看到一个跳转。

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

Answer 8

在Bootstrap 3.3.6上testing – 工作！

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

Answer 9

试试这个> Bootstrap 3

辉煌的exacly我正在寻找，但是我有一些与JavaScript和bootstrap模式的冲突，这固定它。

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

希望这可以帮助。

Answer 10

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

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

Answer 11

我认为最好使用默认的Bootstrap 3的collapse.js方法，使用.navbar-collapse作为你想隐藏的可折叠元素，如下所示。

其他解决scheme可能会导致元素在您的网页中显示或function的方式的其他不希望遇到的问题。 因此，虽然有些解决scheme可能会解决您的初始问题，但可能会引入其他解决scheme，因此请确保在进行任何修复后对您的站点进行彻底的testing。

要看到这个代码在行动：

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

干杯!

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

Answer 12

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

Answer 13

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

Answer 14

这是我做的。 如果有一个更stream畅的方式，请告诉我。

在<a>标签菜单的链接，我添加了这个代码：

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

它保留了幻灯片animation。 所以充分使用它会看起来像这样：

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

Answer 15

在每个下拉链接中，inputdata-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> 

这在屏幕上可以完美的工作，像手机屏幕一样的下拉菜单，但是在桌面和平板电脑上它会创build一个flickr。 这是因为.collapsing类被应用。 要删除flickr，我创build了一个媒体查询并将隐藏的插入到隐藏类中。

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

Answer 16

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

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

Answer 17

这是我用过的最好的解决scheme。

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

Answer 18

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

Answer 19

100％工作： –

添加HTML

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

使用Javascript

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

Answer 20

这隐藏导航崩溃，而不是animation，但同样的概念，上面的答案

JS：

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

HTML：

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

我更喜欢单页面网站，因为我使用了已经有animation效果的localScroll.js。

Answer 21

移动视图： 如何在bootstrap + dropdown + jquery + scrollto中隐藏切换导航，导航条目指向同一页面上的定位点/标识 ，一个页面模板

我正在尝试上述任何解决scheme的问题是，他们只折叠子菜单项，而导航菜单不折叠。

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

那么…为什么不把这个工作分配给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

Answer 22

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

Answer 23

Bootstrap在Collapse元素上设置一个.in类来触发animation – 打开它。 如果你只是删除.in类，animation不会运行，但会隐藏元素 – 不完全是你想要的。

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

所以这个代码只是说：

如果我的元素有应用的类.in ，通过触发默认的Bootstrapanimationclosures它。 否则，运行打开它的默认Bootstrap动作/animation

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

Answer 24

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

Answer 25

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

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

Answer 26

我发布了一个与Aurelia合作的解决scheme： https ： //stackoverflow.com/a/41465905/6466378

问题是你不能只添加data-toggle="collapse"和data-target="#navbar"到你的元素。 jQuery在Aurelia或Angular环境中不起作用。

对我来说最好的解决scheme是创build一个自定义属性来侦听相应的媒体查询，并在需要时添加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); } } } } 

Answer 27

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

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

Answer 28

我检查菜单是通过检查“in”类打开，然后运行代码。

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

完美的作品。