单击时隐藏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(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"

Answer 3

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

Answer 4

最好使用默认的collapse.js方法:

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

Answer 5

更简单,没有舔重复代码,只需将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项目时你不会阻止点击事件冒泡.

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

每当用户点击身体的任何位置时,都应关闭导航 - 而不仅仅是导航元素.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');
        }
  });

});

Answer 8

在Bootstrap 3.3.6上测试 - 工作!

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

Answer 9

试试这个> Bootstrap 3

很棒的我正在寻找的东西,但是我与javascript和bootstrap模式有一些冲突,这解决了它.

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