javascript - 如何让我的 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

感谢Hide Twitter Bootstrap navbar on click

Answer 1

我先评论:

('.nav navbar-nav a') should be ('.nav.navbar-nav a') see: CSS rule to apply only if element has BOTH classes and you should apply your click for closing on .navbar-collapse if i understand your question well

当我测试上述内容时，我认为我应该使用下面所示的代码。

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

注意，我认为 .collapse('hide'); 比 click 更有意义(更具可读性)，尽管效果可能是相同的。