Bootstrap 3折叠菜单在单击时不会关闭

122

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

它通常会在较小的设备上崩溃。单击菜单按钮可展开菜单，但是如果我单击（或触摸）菜单链接，菜单将保持打开状态。我必须怎么做才能再次关闭它？

html  css  twitter-bootstrap  navigation 
— 偏执狂
source
5
user3669917的答案当然是最简单，最直接的答案！
— 托马斯
1
— Inanc Gumus

Answers:

48

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

— VCNinc
source
8
这是错误的，引导程序会自动切换“崩溃”类。您不需要任何其他jquery代码。如果您有这种行为，则表示您的html代码有问题（就我而言，我包括两次jquery和bootstrap，请参阅@raisercostin的答案）。
— RomOne
@RomOne这个答案是正确的。引导并没有链接被点击后关闭菜单默认。另一个答案仅在人们错误地两次包含jQuery而不适用此问题的正确答案时才适用。
— Zim
136

只是为了从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');
    }
});
— 凯文·尼尔森
source
1
完美地工作。感谢分享！
— Rodrigo Chiong
你能解释一下'$（this）.collapse（'hide'）;' 请。我不明白的地方“崩溃”来自
— timebandit
@ImranNazir，对不起，这是问题collapse的解决方法，但它是由bootstrap定义并附加到jQuery对象的方法……大概是，他们将其重复用于多种目的（手风琴，导航栏等）：getbootstrap.com/javascript /＃collapse-usage
— 凯文·纳尔逊
更新的代码对我有用，上面的答案没有。谢谢！
— RandomUs1r
“ [UPDATE 2014-11-04]”成功了。至于其他建议删除不需要对bootstrap.js和jquery的重复引用的解决方案。我发现此解决方案可解决问题，从而减少调试时间，并提供更明确的行为。谢谢！。希望对您有所帮助，对我有帮助。
— Nour Lababidi
122

更改此： 

<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

— FullStackDev
source
14
此解决方案适用于“移动”视图，但是一旦单击链接，它就会在大屏幕上显示显示/隐藏动画。
— Ayman Al-Absi 2015年
22
@ AymanAl-Absi您必须.in在data-target值的末尾添加：data-target=".navbar-collapse.in"。从这个答案的评论：stackoverflow.com/a/21797534/89818
— caw 2016年
这对我来说很有效，但是却打破了以往的想法，你知道为什么会这样吗？
— Craig Harley
1
使用@caw答案更新以上代码时为我工作。我也在使用scrollspy功能。
— 尼拉吉
到目前为止，这是最好的解决方案。没有javascript，没有jQuery。如果您希望某些链接使菜单保持打开状态，请不要添加这些参数。应该指出是最佳答案。谢谢。
— ed1nh0
55

我有同样的问题，但由于包含两次 bootstrap.js和jquery.js文件而引起。

一次单击，两个jquery实例对事件进行了两次处理。一个关闭，另一个打开肘节。

— 兰考司汀
source
3
我遇到了完全相同的问题，但没有意识到他们被两次包括在内。感谢您发布！
— Brian ONeil 2014年
2
我们的实习生也是如此。感谢您发布此信息。
— 泰斯曼2015年
2
男子！我做过同样的事情-我想我要回到实习了！
— Dicer
2
太有帮助了！我已经为此工作了好几天。使用导航栏模板时，这可能很常见。小心人！:)
— 马特·巴特勒
2
这应该被标记为最佳答案。我在删除bootstrap.js时遇到了相同的问题，从而解决了问题
— katwekibs
17 
$(".navbar-nav li a").click(function(event) {
    if (!$(this).parent().hasClass('dropdown'))
        $(".navbar-collapse").collapse('hide');
});

这将有助于处理导航栏中的下拉菜单

— Chakradhar Vyza
source
这解决了我的问题，在jssor幻灯片中将bootstrap与javascript一起使用会产生问题。展开和折叠移动菜单时，此代码还会产生很酷的效果。
— 亚当·韦斯特
谢谢@Chakradhar，它节省了我的时间。
— 奥马尔·巴希尔
谢谢，忘记了Laravel 5.5 JS在主要js文件中包含B和Jquery。
— Jack Vial
12

我在Bootstrap 4，alpha-6和Joakim Johansson的上述回答中也遇到过类似的问题，这使我朝着正确的方向发展。不需要javascript。将data-target =“。navbar-collapse”和data-toggle =“ collapse”放入导航器内的div标签中，但围绕链接/按钮，对我来说很有效。

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

— 保罗
source
你的帖子对我很有帮助。这为我解决了它<body data-toggle =“ collapse” data-target =“。navbar-collapse”>
— Dessus，
这已经在3年前发布了。此外，它会在非移动视图中中断动画。
— Bevor
6

我知道这个问题是针对Bootstrap 3的，但是如果您正在寻找Bootstrap 4的解决方案，请执行以下操作：

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});
— 赛德
source
我使用的是BS4测试版，您的代码运行正常。我在这里尝试了所有其他建议的解决方案，但是没有运气。BS4显然已经发生了足够的变化，以致其他解决方案不再适用。
— 自行车戴夫
为了保持相关性并使内容与最新信息保持同步-这应该是最佳答案。
— 瑞奇
@Ricky OP指定了Bootstrap 3，而不是
— 4。– Malavos
对于带有下拉菜单的菜单，我使用了以下菜单：$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }
— James Wilkins
5

我遇到了同样的问题，我在使用jQuery-1.7.1和bootstrap 3.2.0。我将jQuery版本更改为最新的（jquery-1.11.2）版本，并且一切正常。

— 登索尔
source
5

我做了 

$(".navbar-toggle").click(function(event) {
    $(".navbar-collapse").toggle('in');
});
— 编织醚
source
4

尽管较早前发布的更改菜单项本身的解决方案（如下所示）在菜单位于小型设备上时仍然有效，但在菜单处于全宽度并展开时会产生副作用，这可能导致水平滚动条滑过菜单项。javascript解决方案没有此副作用。

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

（很抱歉这样回答，想在此答案中添加评论，但似乎我没有足够的信誉来发表评论）

— 威姆·范·豪斯
source
2 
 $(function(){ 
    var navMain = $("#your id");
    navMain.on("click", "a", null, function () {
      navMain.collapse('hide');
    });
});
— 捷
source
检查新版本Matthias S :-)
— Chit
@bfontaine首先，您必须在菜单div中添加ID，然后单击菜单，然后所有菜单都将被隐藏。例如：-当您单击关于我们菜单时，其余菜单选项卡将被隐藏。
— 2017年
1
谢谢，但请在您的回答中写出来；）
— bfontaine
1

如果要通过在angular指令内调用.collapse（'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');
    });
  }
}

HTML： 

<li class="navbar-btn">
     <a href="#" ng-hide="username" **btn-auto-collapse**>Sign in</a>
</li>
— 米尔纳·德·耶稣
source
1

请确保您使用的是最新的bootstrap js版本。我面临着同样的问题，只是从bootstrap-3.3.6升级bootstrap.js文件就可以了。

— 阿曼·阿伦
source
1

如果只希望在移动屏幕上使用时切换导航，则只需在其上添加元素data-toggle="collapse"和data-target="#navbar"将元素添加到移动屏幕上，但是在桌面屏幕上单击时，会给您带来怪异的闪烁。如果您在Aurelia或Angular环境中，jQuery解决方案将无法正常工作。

对我而言，最好的解决方案是创建一个自定义属性，以侦听相应的媒体查询，并在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);
      }
    }
  }
}
展开摘要

— 哈罗
source
0

我发现经过反复的尝试，反复试验，这是我在jsfiddle上最好的解决方案。 链接到jsfiddle.net上的灵感。我正在使用带有崩溃和汉堡包切换功能的bootstrap的navbar navbar-fixed-top。这是我在jsfiddle上的版本：jsfiddle Scrollspy navbar。我只是按照getbootsrap.com上的说明获得基本功能。对我来说，问题主要出在getbootstrap网站推荐的模糊指导和js上。最好的部分是，添加了这部分额外的js（确实包括上述线程中提到的一些内容）对我来说解决了一些Scrollspy问题，其中包括：

  1. 单击导航“部分”（例如href =“＃foobar”）（发出该线程的地址）时，折叠/切换的导航菜单将隐藏。
  2. 活动的“部分”已成功突出显示（即js成功创建了class =“ active”）
  3. 消除了在折叠的导航中发现的恼人的垂直滚动条（仅在小屏幕上）。

注意：在下面显示的js代码中（来自我帖子中的第二个jsfiddle链接）：

topMenu = $（“＃myScrollspy”），

...值“ myScrollspy”必须与HTML中的id =“”相匹配，就像这样...

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

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

— 亚当·卡里曼（Adam Calihman）
source
0

您只需要按钮中的data-target =“。navbar-collapse”即可。

<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>
— 马罗多
source
+1：它也可以通过将data-toggle =“ collapse” data-target =“。navbar-collapse”添加到<a />或在我的情况下使用Meteorjs在<Link />中添加React，谢谢。
— Joe L.
是的，它可以使用，<a/>但是不能使用<NavLink/>，它可以崩溃，但是，<NavLink/>它不能再使用了，有什么主意吗？
— 金字塔
0

这是对我有用的代码：

jQuery('document').ready(function()
{   
   $(".navbar-header button").click(function(event) {
   if ($(".navbar-collapse").hasClass('in'))
   {  $(".navbar-collapse").slideUp();  }
});})
— 罗迪·卡波内尔
source
0

我有同样的问题，请确保bootstrap.js包含在您的html页面中。就我而言，菜单已打开但没有关闭。一旦包含了bootstrap js文件，一切就可以正常工作。

— 埃利特米尔
source
0

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

例：

JS：

$scope.toogleMyClass  = function(){

    //dropdown-element

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

};

将此功能与onClick我的简单作品挂钩。

— yasir_mughal
source
0

我遇到了类似的问题，但是我的保持打开状态并不能很快打开/关闭，我发现在bootstrap.min.js之前加载了jquery-1.11.1.min.js。因此，我颠倒了这2个文件的顺序并修复了我的菜单。现在可以完美运行。希望能帮助到你

— 瓦斯科
source
0

问题可能是您使用的引导程序或jquery的版本过旧，或者您在标记中调用了多个版本。

只要保留最新版本，您只需一个参考。解决问题。

— 缺口
source
0

您可能只需要确保正在加载jQuery和Bootstrap.min.js ATF。导航是在页面上呈现的第一件事，因此，如果您的脚本位于HTML的底部，则将失去所有JavaScript功能。

— 克里斯·约翰逊
source
0

我只在移动设备上遇到过相同的问题，但对于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();
    }
  }

希望能帮助到你 ：）

— 静态
source
-2

我的菜单不是导航栏标准菜单，但是我设法使用“ onclick”功能和“ .click（）”自动折叠了我的菜单。

<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
— Bravo Stefane
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.