如何让我的 twitter 引导导航栏在点击时关闭？答案

【问题标题】：How do I get my twitter bootstrap navbar to close on click?如何让我的 twitter 引导导航栏在点击时关闭？
【发布时间】：2014-01-14 12:37:17
【问题描述】：

我试图让我的导航栏在点击时自动折叠。特别是当它在移动设备上时。我不明白为什么下面的代码不起作用，但我相信我可能有 '.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

【问题讨论】：

我们都会喜欢很多东西，但我们不会在这里免费提供工作。
哇，我不明白你在说什么......你是在建议我聘请开发人员让我的导航栏在点击时自动折叠？
向我们展示您的尝试。您正在让人们免费解决您的问题，所以您至少可以给我们提供.. 链接到您的网站还不够好，因为您希望我们再次调试.. 再次免费。我建议你看看stackoverflow.com/help/how-to-ask
我应该提一下，所有这些信息都必须在问题本身中；链接死了，这个网站的目标是提供有用信息的集合。如果链接和示例失效，那么这个问题对于未来有同样问题的网站访问者来说毫无用处。

标签： javascript twitter-bootstrap twitter-bootstrap-3

【解决方案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 更有意义（更具可读性），尽管效果可能相同。

【讨论】：

即使你发表了评论，我很惊讶你没有解释你的答案。
查看：bootply.com/102598 它似乎可以正常工作并按照您的描述进行操作（打开移动视图）
我的用户错误，我的代码运行良好。谢谢你，巴斯！

【解决方案2】：

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

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

Reference

【讨论】：