如何通过点击关闭我的twitter bootstrap导航栏？

Question

我试图让我的导航栏在点击时自动崩溃。 特别是当它在移动设备上时。 我不明白为什么下面的代码不起作用，但我相信我可能有'.nav navbar-toggle a'错误。

HTML

<div class="navbar navbar-fixed-top navbar-default" 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>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
         <a class="navbar-brand" href="#"></a>
    </div>
    <div class="collapse navbar-collapse" id="close">
      <ul class="nav navbar-nav">
        <li class="navtext"><a href="#about">ABOUT</a></li>
        <li class="navtext"><a href="#services">SERVICES</a></li>
        <li class="navtext"><a href="#work">WORK</a></li>
        <li class="navtext"><a href="#contact">CONTACT</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

Java脚本（我将此代码添加到bootstrap.js的末尾）

function close_toggle() {
if ($(window).width() <= 768) {
  $('.nav.navbar-nav a').on('click', function(){
      $("#close").click();
  });
}
else {
 $('.nav.navbar-nav a').off('click');
}
}
close_toggle();

$(window).resize(close_toggle); 

该网站是speak-design.com

感谢点击隐藏Twitter Bootstrap导航栏

Answer 1

我首先评论道：

（'.nav navbar-nav a'）应该是（'.nav.navbar-nav a'），请参阅： CSS规则仅在元素具有BOTH类时应用，并且应该应用您的点击以关闭.navbar-collapse如果我很好地理解你的问题

当我测试上面的时候，我想我应该使用下面显示的代码。

<script>
function close_toggle() {
if ($(window).width() <= 768) {
  $('.nav.navbar-nav a').on('click', function(){
      $('.navbar-collapse').collapse('hide');
  });
}
else {
 $('.nav.navbar-nav a').off('click');
}
}
close_toggle();

$(window).resize(close_toggle); 
</script>

NB我认为.collapse('hide'); 虽然效果可能相同，但比click更有意义（更具可读性）。

Answer 2

它已经做到了。 确保在元标记中添加了视口

<meta name="viewport" content="initial-scale=1">

参考