引导3折叠菜单不关闭点击

我有一个或多或少的标准导航从引导3

<body data-spy="scroll" data-target=".navbar-collapse">
<!-- ---------- Navigation ---------- -->
<div class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="index.html"> <img src="#"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
<li><a href="#four">Four</a></li>
</ul>
</div>
</div>
</div>

它通常在较小的设备上崩溃。点击菜单按钮可以扩展菜单，但是如果我点击(或者触摸)菜单链接，菜单就会保持打开状态。我要怎么做，再关上它吗？

226665 次浏览
小开
最佳答案

Bootstrap 的默认设置是在单击菜单项时保持菜单打开。通过对要折叠的 jQuery 元素调用 .collapse('hide');，可以手动覆盖这种行为。

小开

是的

$(".navbar-toggle").click(function(event) {
$(".navbar-collapse").toggle('in');
});
小开

在 GitHub 上分享这个解决方案，这是一个流行的答案:

Https://github.com/twbs/bootstrap/issues/9013#issuecomment-39698247

$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).collapse('hide');
}
});

这是连接到文档的，所以您不必在 ready ()上执行它(您可以动态地将链接添加到菜单中，它仍然可以工作) ，并且只有在菜单已经展开时才会调用它。有些人报告说，菜单打开时会出现奇怪的闪烁，然后立即关闭，其他代码没有验证菜单是否有“ in”类。

[ UPDATE 2014-11-04]显然，当使用子菜单时，上面的内容会引起问题，所以上面的内容被修改为:

$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a:not(".dropdown-toggle")') ) {
$(this).collapse('hide');
}
});
小开

改变这一点:

<li><a href="#one">One</a></li>

回到这里:

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

这个简单的改变对我很有效。

档号: https://github.com/twbs/bootstrap/issues/9013

小开

您所需要的只是按钮中的 data-target = “ . navbar-archive”，其他什么都不需要。

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
小开

我有同样的问题，我使用 jQuery-1.7.1和 bootstrap 3.2.0。 我把 jQuery 版本改成了最新的(jquery-1.11.2)版本，一切都很顺利。

小开

我有同样的问题，但造成的包括 twice bootstrap.js和 jquery.js文件。

只需单击一下，这个事件就会被两个 jquery 实例处理两次，一次关闭，一次打开切换。

小开

我的菜单不是一个导航栏标准的，但我设法自动折叠我的，使用一个“ onclick”函数和一个“。点击()”。

<div class="main-header">
<div class="container">
<div id="menu-wrapper">
<div class="row">


<div class="logo-wrapper col-lg-4 col-md-6 col-sm-7 hidden-xs">


</div> <!-- /.logo-wrapper -->


<div class="logo-wrapper2 visible-xs col-xs-9">


</div> <!-- /.smaller logo-wrapper -->


<div class="col-lg-8 col-md-6 col-sm-5 col-xs-3 main-menu text-center">
<ul class="menu-first hidden-md hidden-sm hidden-xs">
<li class="active"><a href="#">item1</a></li> |
<li><a href="#our-team">item2</a></li> |
<li><a href="#services">item3</a></li> |
<li><a href="#elia">item4</a></li> |
<li><a href="#portfolio">item5</a></li> |
<li><a href="#contact">item6</a></li>
</ul>
<a href="#" class="toggle-menu visible-md visible-sm visible-xs"><i class="fa fa-bars"></i></a>
</div> <!-- /.main-menu -->
</div> <!-- /.row -->
</div> <!-- /#menu-wrapper -->
<div class="menu-responsive hidden-lg">
<ul>
<li class="active" onclick = $(".toggle-menu").click();><a href="#">item1</a></li>
<li><a href="#our-team" onclick = $(".toggle-menu").click();>item2</a></li>
<li><a href="#services" onclick = $(".toggle-menu").click();>item3</a></li>
<li><a href="#elia" onclick = $(".toggle-menu").click();>item4</a></li>
<li><a href="#portfolio" onclick = $(".toggle-menu").click();>item5</a></li>
<li><a href="#contact" onclick = $(".toggle-menu").click();>item6</a></li>
</ul>
</div> <!-- /.menu-responsive -->
</div> <!-- /.container -->
</div> <!-- /.main-header
小开

虽然之前发布的更改菜单项本身的解决方案(如下所示)在菜单位于小型设备上时有效，但当菜单为 在全宽和展开状态下，这可能导致水平滚动条滑动到菜单项上时会产生副作用。Javascript 解决方案没有这种副作用。

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

(sorry for answering like this, wanted to add a comment to that answer, but, seems I haven't sufficient credit to make remarks )

小开

我发现，经过多次的斗争，反复试验和错误，最好的解决方案为我的 jsfiddle。链接到 jsfiddle.net 的灵感.我正在使用 bootstrap 的导航栏导航栏固定顶部与崩溃和汉堡包切换。这是我在 jsfiddle 上的版本: 滚动间谍导航栏。我只是通过 getbootsrap.com 上的说明获得了一些基本功能。对我来说，问题主要在于 getbootstrap 站点推荐的模糊方向和 js。最好的部分是，添加这些额外的 js (其中包含了上述线程中提到的一些内容)为我解决了一些 Scrollspan 问题，其中包括:

  1. Collapsed/toggled nav menu hides when nav "section" (e.g. href="#foobar") is clicked (issue addressing this thread).
  2. 成功突出显示了活动的“ section”(例如，js 成功地创建了 class = “ Active”)
  3. 在折叠导航(仅在小屏幕上)上发现的烦人的垂直滚动条被消除了。

注意: 在下面所示的 js 代码中(来自我文章中的第二个 jsfiddle 链接) :

TopMenu = $(“ # myScrollpy”) ,

...the value "myScrollspy" must match it the id="" in your HTML like so...

<nav id="myScrollspy" class="navbar navbar-default navbar-fixed-top">

当然，您可以将该值更改为您喜欢的任何值。

小开

如果你想通过在一个角度的指令中调用. fall (‘ hide’)来手动覆盖这个行为，以下是代码:

Javascript 文件:

angular
.module('yourAppModule')
.directive('btnAutoCollapse', directive);


function directive() {
var dir = {
restrict: 'A',
scope: {},
link: link
};
return dir;


function link(scope, element, attrs) {
element.on('click', function(event) {
$(".navbar-collapse.in").collapse('hide');
});
}
}

网址: 

<li class="navbar-btn">
<a href="#" ng-hide="username" **btn-auto-collapse**>Sign in</a>
</li>
小开 
$(".navbar-nav li a").click(function(event) {
if (!$(this).parent().hasClass('dropdown'))
$(".navbar-collapse").collapse('hide');
});

这将有助于处理在导航栏下降

小开

请确保您使用的是最新的 bootstrap js 版本。我当时也面临着同样的问题，只是把 bootstrap.js 文件从 bootstrap-3.3.6升级就起到了神奇的作用。

小开

这是我用过的代码:

jQuery('document').ready(function()
{
$(".navbar-header button").click(function(event) {
if ($(".navbar-collapse").hasClass('in'))
{  $(".navbar-collapse").slideUp();  }
});})
小开

我遇到了同样的问题，确保 bootstrap.js 包含在您的 html 页面中。在我的情况下，菜单打开，但没有关闭。一旦我包含了 bootstrap js 文件，一切就正常了。

小开

简单尝试在 javascript 中为下拉式折叠类创建一个函数。

例如:

JS:

$scope.toogleMyClass  = function(){


//dropdown-element


$timeout(function(){
$scope.preLoader = false;
$(document).ready(function() {
$("#dropdown-element").toggleClass('show');
});
},100);


};

Hook this function to onClick simple works for me.

小开

我也有过类似的问题，但是我的不能保持打开状态，它会很快地打开/关闭，我发现我有 jquery-1.11.1。在 bootstrap.min.js 之前加载 min.js。所以我把这两个文件的顺序颠倒过来，修改了我的菜单。现在运行得完美无瑕。希望能有帮助

小开

问题可能是您正在使用过期版本的 bootstrap 或 jquery，或者您正在标记中调用多个版本。

Just keep the latest versions, you only need the one reference. Solves the problem.

小开

如果你只想在移动屏幕上使用导航功能，那么只需在 a 元素中添加 data-toggle="collapse"和 data-target="#navbar"就可以在移动屏幕上使用，但是当你在桌面屏幕上点击时会出现奇怪的闪烁。如果您处于 Aurelia 或 Angular 环境中，jQuery 解决方案就不能很好地工作。

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

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

The custom attribute with Aurelia looks like this:

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

小开

I am having/had similar issues with Bootstrap 4, alpha-6, and Joakim Johanssons answer above started me in the right direction. No javascript required. Putting data-target=".navbar-collapse" and data-toggle="collapse" into the div tag inside the nav, but surrounding the links/buttons, worked for me.

<div class="navbar-nav" data-target=".navbar-collapse" data-toggle="collapse">
<a class="nav-item nav-link" href="#">Menu Item 1</a>
...
</div>

小开

您可能需要确保正在加载 jQuery 和 Bootstrap.min.js ATF。导航是首先要在页面上呈现的内容，所以如果您将脚本放在 HTML 的底部，那么您将失去任何 JavaScript 功能。

小开

我知道这个问题是针对 鞋带3的，但是如果你正在寻找 鞋带4的解决方案，只需要这样做:

$(document).on('click','.navbar-collapse.show',function(e) {
$(this).collapse('hide');
});
小开 
 $(function(){
var navMain = $("#your id");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
小开

我只是在移动设备上遇到了同样的问题，但是在 Angular 应用程序上，我做到了:

App.Component. html

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="col-md-12">
<div class="navbar-header page-scroll">
<button id ="navButton" style="color:red"type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" routerLink="/"><img id="navbrand" class="site-logo"  src="assets/img/yayaka_logo.png"/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="dropdown" appDropdown>
<a class="dropdown-toggle" style="cursor: pointer;">
ΤΙ ΕΙΝΑΙ ΤΟ yayaka<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a (click) = "closeMenu()" href="/#about">About</a></li>
<li><a (click) = "closeMenu()" href="/#services">Services</a></li>
</ul>
</li>
<li class="page-scroll">
<a (click) = "closeMenu()" routerLink="/profiles"><strong>Profiles</strong></a>
</li>
</ul>
</div>
</div>
</div>
</nav>

app.component.ts 

 closeMenu() {
var isMobile = /iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile|Android/i.test(navigator.userAgent);
if (isMobile) {
document.getElementById('navButton').click();
}
}

希望对你有所帮助:)


提交答案