如何通過點擊關閉我的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">

參考