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'）应为（'.nav.navbar-nav a'），请参阅： CSS rule to apply only if element has BOTH classes您应该应用您的点击如果我理解你的问题那么关闭.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>

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

Answer 2

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

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

Reference

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

2 个答案: