jquery - 点击时隐藏 Twitter Bootstrap 导航折叠

Question

这不是子菜单下拉菜单，类别为 li 类，如图所示：

通过从响应式菜单中选择一个类别（模板只是一页），我想在单击时自动隐藏导航折叠。由于模板只有一页，因此也可以作为导航使用。我寻求一个不影响它的解决方案，这里是菜单的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
    $('.navbar-toggler').click(); //bootstrap 4.x
});

Answer 2

我只是在每个链接上复制btn-navbar( ) 的 2 个属性，如下所示：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>

在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 方法（V3 文档，V4 文档）：

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

Answer 5

更优雅的是无需重复代码，只需将data-toggle="collapse"anddata-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元素有足够的填充以容纳胖手指，并且e.stopPropagation()当用户单击nav a项目时，您不会阻止单击事件冒泡。

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

每当用户单击正文上的任何位置时都应关闭导航 - 而不仅仅是导航元素。说菜单已打开，但用户在页面正文中单击。用户希望看到菜单关闭。

您还必须确保切换按钮可见，否则会在菜单中看到跳转。

$(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 上测试 - 工作！

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

Answer 9

试试这个 > Bootstrap 3

出色的正是我正在寻找的东西，但是我与 javascript 和引导模式发生了一些冲突，这解决了它。

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

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

Answer 12

我认为最好使用默认的 Bootstrap 3 的collapse.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>

Answer 13

在每个下拉链接上放置 data-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>

这在具有像移动屏幕这样的下拉菜单的屏幕上完美运行，但在台式机和平板电脑上它会创建一个 flickr。这是因为应用了 .collapsing 类。为了删除 flickr，我创建了一个媒体查询并将溢出隐藏到折叠类中。

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

Answer 14

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

这就是我的做法。如果有更流畅的方法，请告诉我。

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

Answer 16

100% 工作：-

在 HTML 中添加

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

Javascript

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

Answer 17

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

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

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

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

Answer 19

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

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

$("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 21

移动视图：如何在 bootstrap + dropdown + jquery + scrollto 中隐藏切换导航，导航项指向同一页面上的锚点/ID，一个页面模板

我尝试使用上述任何解决方案的问题是它们仅折叠子菜单项，而导航菜单不会折叠。

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

嗯......为什么不把这个工作分配给滚动功能呢？简单的 ：-）

所以在这两个代码中

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

这隐藏了导航折叠而不是对其进行动画处理，但与上述答案的概念相同

JS：

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

HTML：

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

我更喜欢在单页网站上使用它，因为我使用已经动画的 localScroll.js。

Answer 24

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

Answer 25

Bootstrap.in在 Collapse 元素上设置了一个类来触发动画——打开它。如果您只是删除.in该类，则动画不会运行，但会隐藏元素——这不是您想要的。

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

所以这段代码只是说：

如果我的元素应用了该类.in，请通过触发默认引导动画来关闭它。否则运行默认的 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');
    }
})

Answer 26

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

我在这里发布了一个适用于 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);
      }
    }
  }
}

Answer 28

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

  由于 touchstart 事件会出现一些奇怪的行为：单击的按钮最终不是我实际单击的按钮，因此会破坏链接。另外，它会将 .show 类添加到我导航中的其他一些不相关的下拉列表中，从而导致一些更奇怪的东西。

• 试图将 div 更改为 li
• 试图 e.preventDefault() 和 e.stopPropagation()
• 尝试并尝试更多

什么都行不通。

所以，相反，我有（到目前为止）这样做的奇妙想法：

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

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

它实际上完全符合我的要求：当哈希发生变化时折叠菜单（即点击导致其他地方发生）。这很好，因为我现在可以在我的菜单中拥有不会折叠的链接。

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

感谢所有参与该主题的人，这里有很多信息需要学习。

Answer 29

如果您在使用上述 jQuery 解决方案后遇到滚动问题，例如

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

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

要解决此问题，您必须删除此类：

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

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

    });
</script>

Answer 30

在大多数情况下，您只想在切换按钮可见时调用切换功能......

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

Answer 31

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

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

完美运行。