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

【问题标题】：Bootstrap 3 collapsed menu doesn't close on clickBootstrap 3折叠菜单在点击时不会关闭
【发布时间】：2014-02-07 19:11:14
【问题描述】：

我有一个来自引导程序 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>

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

【问题讨论】：

user3669917 的回答肯定是最简单直接的回答！
Hide Twitter Bootstrap nav collapse on click的可能重复

标签： html css twitter-bootstrap navigation

【解决方案1】：

只是为了从 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');
    }
});

【讨论】：

完美运行。感谢分享！
你能解释一下'$(this).collapse('hide');'请。我不明白“崩溃”从何而来
@ImranNazir，对不起，这是问题之后的方式，但collapse 是由引导程序定义并附加到 jQuery 对象的方法......大概，他们将其重新用于多种目的（手风琴，导航栏等）：getbootstrap.com/javascript/#collapse-usage
更新的代码对我有用，上面的答案没有。谢谢！
“[UPDATE 2014-11-04]”有效。至于建议删除对 bootstrap.js 和 jquery 的重复引用的其他解决方案，这不是解决方案所必需的。我发现这个解决方案可以用更少的调试时间和更明确的行为来解决问题。谢谢！。我希望这对您有所帮助，因为它确实对我有所帮助。

【解决方案2】：

改变这个：

<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

【讨论】：

此解决方案适用于移动视图，但单击链接后会在大屏幕中显示/隐藏动画。
@AymanAl-Absi 您必须将.in 添加到data-target 值的末尾：data-target=".navbar-collapse.in"。来自此答案的评论：stackoverflow.com/a/21797534/89818
这对我很有用，但它破坏了滚动间谍，知道为什么会这样吗？
使用@caw 回答更新上述代码时为我工作。我也在使用 scrollspy 功能。
如果你使用<NavLink to="/path"></NavLink>它不会工作，它只是折叠切换，是的它可以使用<a>标签但不是<NavLink>任何想法，如何解决它？

【解决方案3】：

我遇到了同样的问题，但由于包含两次 bootstrap.js 和 jquery.js 文件。

单击一次，两个 jquery 实例都处理了两次事件。一关一开。

【讨论】：

我遇到了完全相同的问题，但没有意识到它们被包含了两次。感谢您发布此信息！
我们的实习生也是如此。感谢您发布此内容。
男人！我做了同样的事情 - 我想我又回到了实习生的状态！
太有帮助了！我已经为此工作了好几天。这在使用导航栏模板时很常见。小心人们！ :)
这应该被标记为最佳答案。我有同样的问题删除 bootstrap.js 解决了问题

【解决方案4】：

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

【讨论】：

这是错误的，引导程序自动切换“折叠”类。您不需要任何额外的 jquery 代码。如果您有这种行为，则意味着您的 html 代码中有问题（就我而言，我包含了两次 jquery 和 bootstrap，请参阅@raisercostin 的答案）。
@RomOne 这个答案是正确的。默认引导does not close the menu after links are clicked。另一个答案仅适用于人们错误地包含 jQuery 两次（这不是该问题的正确答案）。

【解决方案5】：

$(".navbar-nav li a").click(function(event) {
    if (!$(this).parent().hasClass('dropdown'))
        $(".navbar-collapse").collapse('hide');
});

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

【讨论】：

这解决了我的问题，即使用引导程序和来自 jssor 幻灯片的 javascript 会产生问题。这段代码在展开和折叠移动菜单时也会产生很酷的效果。
感谢@Chakradhar，它节省了我的时间。
谢谢，忘了 Laravel 5.5 JS 在主 js 文件中包含 B 和 Jquery。

【解决方案6】：

我在上面的 Bootstrap 4、alpha-6 和 Joakim Johanssons 回答中遇到/遇到了类似的问题，这让我朝着正确的方向前进。不需要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>

【讨论】：

你的帖子对我帮助很大。这为我解决了
这已在 3 年前发布。此外，它会破坏非移动视图中的动画。

【解决方案7】：

我做到了

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

【讨论】：

【解决方案8】：

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

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});

【讨论】：

我正在使用 BS4 测试版，您的代码运行良好。我在这里尝试了所有其他建议的解决方案，但没有成功。 BS4 显然已经发生了足够的变化，以至于其他解决方案根本不适用。
为了相关性并使事情与更新信息保持同步 - 这应该是最佳答案。
@Ricky OP 指定 Bootstrap 3，而不是 4。
对于带有下拉菜单的菜单，我使用了这个：$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }

【解决方案9】：

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

【讨论】：

【解决方案10】：

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

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

（抱歉这样回答，想对该答案添加评论，但是，我似乎没有足够的信誉发表评论）

【讨论】：

【解决方案11】：

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

【讨论】：

检查新版本 Matthias S :-)
@bfontaine 首先，您必须在菜单 div 中添加 id，当您单击菜单时，所有菜单都将被隐藏。例如：- 当您点击关于我们的菜单时，其余菜单选项卡将被隐藏。
谢谢，但请把答案写在 in 中；)

【解决方案12】：

如果您想通过在 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>

【讨论】：

【解决方案13】：

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

【讨论】：

【解决方案14】：

这是对我有用的代码：

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

【讨论】：

【解决方案15】：

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

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

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

【讨论】：

【解决方案16】：

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

希望对你有帮助:)

【讨论】：

【解决方案17】：

我发现，经过多次努力、反复试验，在 jsfiddle 上对我来说是最好的解决方案。 Link to inspiration on jsfiddle.net。我正在使用 bootstrap 的导航栏 navbar-fixed-top 与折叠和汉堡切换。这是我在 jsfiddle 上的版本：jsfiddle Scrollspy navbar。我只是使用 getbootsrap.com 上的说明获得基本功能。对我来说，问题主要出在 getbootstrap 网站推荐的模糊方向和 js 上。最好的部分是添加这个额外的 js（其中确实包括上述线程中提到的一些内容）为我解决了几个 Scrollspy 问题，包括：

单击导航“部分”（例如 href="#foobar"）时，折叠/切换的导航菜单会隐藏（解决此线程的问题）。
活动“部分”成功突出显示（即js成功创建class="active"）
消除了折叠导航（仅在小屏幕上）上令人讨厌的垂直滚动条。

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

topMenu = $("#myScrollspy"),

...值“myScrollspy”必须与您的 HTML 中的 id="" 匹配...

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

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

【讨论】：

【解决方案18】：

您只需要按钮中的 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>

【讨论】：

+1 ：它也可以通过添加 data-toggle="collapse" data-target=".navbar-collapse" 到或者在我的情况下在 Meteorjs 中使用 React 的，谢谢。
是的，它适用于<a/>，但它不适用于<NavLink/>，它崩溃了，但是<NavLink/> 不再起作用了，有什么想法吗？

【解决方案19】：

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

【讨论】：

【解决方案20】：

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

例子：

JS：

$scope.toogleMyClass  = function(){

    //dropdown-element

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

};

将此函数连接到onClick 对我来说很简单。

【讨论】：

【解决方案21】：

我遇到了类似的问题，但我的无法保持打开状态，它会快速打开/关闭，我发现我在 bootstrap.min.js 之前加载了 jquery-1.11.1.min.js。所以我颠倒了这两个文件的顺序并修复了我的菜单。现在运行完美。希望对你有帮助

【讨论】：

【解决方案22】：

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

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

【讨论】：

【解决方案23】：

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

【讨论】：

【解决方案24】：

我的菜单不是导航栏标准菜单，但我设法使用“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

【讨论】：