点击隐藏 Bootstrap 导航崩溃

这不是一个子菜单下拉列表，类别是如图所示的 li 类:

enter image description here

通过从响应菜单中选择一个类别(模板只是 一个页面) ，我想隐藏导航崩溃时自动点击。 也可以漫步作为导航，因为模板只有一个 我寻找一个不影响它的解决方案，这里是 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 -->
224460 次浏览
小开
最佳答案

试试这个:

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

这隐藏导航塌陷，而不是动画它，但相同的概念作为上述答案

约翰逊:

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

HTML:

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

我更喜欢在单页面站点上使用这种方法，因为我使用的 localScroll.js 已经具有动画效果。

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

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

小开

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

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

在 引导程序4导航栏中，in改为 show，因此语法如下:

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

小开

移动视图: 如何隐藏切换导航在引导 + 下拉 + jquery + 滚动条与导航项目指向锚/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" );
}
});

如果你想看到它的行动只是检查它的 康复数据大 NAS

小开

更加优雅的做法是不使用重复的代码，只将 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()点击事件冒泡。

小开

试试这个 > Bootstrap 3

聪明正是我所寻找的，但是我有一些与 javascript 和引导模式冲突，这修复了它。

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

希望这个能帮上忙。

小开

最好使用默认的坍塌.js 方法 (V3文件，V4文件) :

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

更新你的

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


});
小开

我是这样做的。如果有更好的办法，请告诉我。

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

小开

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

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

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


});
小开

这招对我很管用。它与公认的答案相同，但修复了与桌面/平板电脑视图相关的问题

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

小开

Bootstrap 设置了一个 .in类来触发这个动画——打开它。如果您只是删除 .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');
}
})
小开

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

其他解决方案可能会导致其他不希望出现的问题的方式元素显示或功能在您的网页。因此，虽然一些解决方案可能看起来修复了您最初的问题，但它可能很好地引入了其他解决方案，所以请确保在任何修复之后对您的站点进行彻底的测试。

查看此代码的实际运行情况:

  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>

小开

测试自举3.3。6-工作的！

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

小开

然后给每一个添加一个 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>
小开

在每个下拉链接中，放入 data-toggle = “  崩溃”和 data-target = “ . nav- 崩溃”，其中 nav- 崩溃就是您給予下拉列表的名称。

<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。这是因为。应用了崩溃类。 为了删除 flickr，我创建了一个媒体查询，并插入了隐藏在崩溃类中的溢出。

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

将 data-toggle = “  倒”data-target = “ . navbar-collapse.in”添加到标记 abc0对我来说很有用。

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

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

小开

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"添加到 a 元素中。而且 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);
}
}
}
}

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

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

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

效果很好。

小开

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

$('.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 中单击的链接上方查找下拉菜单类的存在，如果存在，那么链接将打算启动一个下拉菜单，因此菜单不会被隐藏。单击下拉菜单中的链接时，导航栏将正确隐藏。

小开

100% 工作:-

添加 HTML

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

Javascript

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

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

    由于触摸开始事件，会有一些奇怪的行为: 点击的按钮最终不是我实际点击的按钮，因此断开了链接。 另外，它还会把.show 类添加到导航中其他一些不相关的下拉列表中，从而导致更多奇怪的东西

  • 想把 Div 改成 Li
  • 尝试使用 e.proventDefault ()和 e.stop  传播()
  • 一次又一次尝试

什么都没用。

所以，相反，我有了(到目前为止)这样做的绝妙想法:

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

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

它实际上做的正是我想要的: 当散列改变时折叠菜单(例如，点击导致其他地方发生)。这很好，因为我现在可以在我的菜单中有不会折叠它的链接。

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

感谢每一个参与这个帖子的人，在这里我们可以学到很多信息。

小开

在大多数情况下，只有当切换按钮可见时，才需要调用切换函数..。

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

如果在使用上面描述的 jQuery 解决方案之后出现滚动问题，例如。

$('.navbar-collapse').collapse('toggle');

那么这是由 Bootstrap 在父元素中添加 CSS 类 overlay-active引起的。这甚至可以到你的 body元素。

要解决这个问题，你必须删除这个类:

<script type="text/javascript">
$(document).ready(function(){


$('.nav-item').click(function(){
$('.overlay-active').removeClass('overlay-active');
});


});
</script>

提交答案