单击时隐藏Twitter Bootstrap导航折叠

时间：2013-05-21 22:26:25

标签： jquery html twitter-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 -->

31 个答案:

答案 0 :(得分：158)

试试这个：

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

答案 1 :(得分：129)

我只是在每个链接上复制btn-navbar（data-toggle="collapse" data-target=".nav-collapse.in"）的2个属性，如下所示：

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

答案 2 :(得分：57)

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

答案 3 :(得分：42)

最好使用默认的collapse.js方法 （V3 docs，V4 docs）：

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

答案 4 :(得分：30)

在没有重复代码的情况下更加优雅，只需将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元素有足够的填充肥胖手指，当用户点击e.stopPropagation()项目时，你就不能通过nav a阻止点击事件冒泡。

答案 5 :(得分：16)

更新您的

<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

答案 6 :(得分：13)

在Bootstrap 3.3.6上测试 - 工作！

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

答案 7 :(得分：13)

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

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

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

});

答案 8 :(得分：7)

试试这个＆gt; Bootstrap 3

非常棒的我正在寻找的东西，但我与javascript和bootstrap模式有一些冲突，这解决了它。 

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

希望这有帮助。

答案 9 :(得分：5)

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

答案 10 :(得分：5)

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

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

答案 11 :(得分：4)

我认为最好使用默认的Bootstrap 3 collapse.js methods使用.navbar-collapse作为您要隐藏的可折叠元素，如下所示。

其他解决方案可能会导致元素在网页中显示或运行的方式出现其他不良问题。因此，虽然某些解决方案似乎可以解决您的初始问题，但可能会很好地介绍其他解决方案，因此请确保在进行任何修复后对您的网站进行全面测试。

要查看此代码：

  
      
  1. 按下面的“运行此代码段”。
    2.   
  2. 按“完整页面”按钮。
    3.   
  3. 缩放窗口，直到下拉激活。
    4.   
  4. 然后选择一个菜单选项，瞧！
    5.   

干杯！

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

答案 12 :(得分：3)

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

答案 13 :(得分：3)

在每个下拉链接上放置data-toggle =＆＃34; collapse＆＃34;和data-target =＆＃34; .nav-collapse＆＃34;其中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;
  }
}

答案 14 :(得分：2)

我是这样做的。如果有更顺畅的方式，请告诉我。

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

答案 15 :(得分：1)

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

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

    });

答案 16 :(得分：1)

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

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

该问题的一个简单解决方案是仅通过检查＆＃39;中是否存在来引用折叠的导航栏：

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

答案 17 :(得分：1)

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

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

答案 18 :(得分：1)

100％工作： -

添加HTML 

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

的Javascript 

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

答案 19 :(得分：1)

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

答案 20 :(得分：0)

我在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函数中有了东西，我只需要添加这一行。

它实际上完全符合我的要求：当哈希值发生变化时折叠菜单（即发生了其他地方的点击）。哪个好，因为我现在可以在我的菜单中找到不会崩溃的链接。

谁知道，也许这会帮助我的人！

感谢所有参与该主题的人，在这里可以学到很多信息。

答案 21 :(得分：0)

Bootstrap在Collapse元素上设置一个.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');
    }
})

答案 22 :(得分：0)

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

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

答案 23 :(得分：0)

如果您在使用上述 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>

答案 24 :(得分：0)

我在这里发布了一个与Aurelia合作的解决方案：https://stackoverflow.com/a/41465905/6466378

问题是您不能只为您的元素添加data-toggle="collapse"和data-target="#navbar"。并且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);
      }
    }
  }
}

答案 25 :(得分：0)

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

答案 26 :(得分：0)

然后为每个

添加一个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>

答案 27 :(得分：0)

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

答案 28 :(得分：0)

移动视图：如何在引导程序+下拉列表中隐藏切换导航+ jquery + scrollto，导航项目指向同一页面上的锚点/ ID ，一页模板

我正在尝试上述任何解决方案的问题是它们只折叠子菜单项，而导航菜单不会崩溃。

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

那么......为什么不将此作业分配给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" );
}
});

如果你想看到它的实际效果，请查看recupero dati da NAS

答案 29 :(得分：0)

这会隐藏导航崩溃而不是动画，但与上面的答案相同的概念

JS：

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

HTML：

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

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

答案 30 :(得分：-1)

我在菜单中打开，检查＆＃39;＆＃39;然后运行代码。

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

完美无缺。

相关问题
最新问题