bootstrap wp-nav關閉$（文檔）.on點擊但不是$（'btn-class'）

我使用bootstrap的jquery導航欄的切碎版本。我本來是無法得到的資產淨值來關閉它打開後就好了，所以我說...

$(document).on('click',function(e){ 
    $('.collapse').collapse('hide'); 
});

...這顯然使我的資產淨值接近被選擇的頁面元素的時候，所以我改變$ （文檔）到$（'。navbar-toggle'），如下所示，但沒有運氣讓它再次關閉。

我錯過了什麼讓導航關閉只需點擊一下按鈕？

 <nav class="navbar navbar-default" role="navigation"> 
      <div class="container row hdrMain"> 
       <div class="col-lg-6 col-md-4 col-sm-3 col-xs-12"> 
        <div class="row verticalAlign"> 
         <div class="col-sm-6 col-xs-6"></div> 
         <div class="navbar-header col-sm-6 col-xs-6"> 
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#closeIT">btn</button> 
         </div> 
        </div> 
       </div> 
       <div class="col-lg-6 col-md-8 col-sm-9"> 
        <div id="closeIT" class="collapse navbar-collapse"> 
         <div class="row hdrIcons"> 
          <ul> 
           <li>icon</li> 
           <li>icon</li> 
           <li>icon</li> 
          </ul> 
         </div> 
         <!--<?php wp nav function called here?>--> 
        </div> 
       </div> 
      </div> 
     </nav>

<script>   
jQuery(document).ready(function($) { 
    $('.navbar-toggle').on('click',function(e){ 
     $('.collapse').collapse('hide'); 
    }); 
</script>

來源

2017-08-28 gabe1331

您可以jQuery的做這樣的：

<script> 
    function someFunction(){ 
     $('#closeIT').collapse(); 
    } 
    $('body').on('click', '.navbar-toggle', someFunction); //event-listener 
</script>

編輯：你應該把事件監聽器在你的JavaScript 文件的末尾。這裏是工作JSFiddle

只需將包裝內navbar崩潰div。

來源

2017-08-28 21:08:36

嗯，似乎只縮小我的標題，並沒有修復按鈕關閉 – gabe1331

你能指定你正在使用哪個版本的引導程序？ –

我包括工作的JSFiddle。我希望這是你所尋求的。因爲我不知道你使用的是哪個版本，所以我在其中包含bootstrap 3.3.7版本。 –

編輯基於評論：

一旦顯示切換的內容，按鈕被它重疊，這是preventnig點擊行爲將其關閉。
將z-index: 1;加到.navbar-toggle將其提高到其下拉內容以上。

Working Fiddle

來源

2017-08-28 21:07:14 Syden

沒有什麼改變..按鈕只是似乎禁用。我不再將光標改爲指針 – gabe1331

@ gabe1331，上面編輯過，輕鬆調整1個CSS行，添加z-index使上面的toggler帶上。希望有所幫助，關心。 – Syden

bootstrap wp-nav關閉$（文檔）.on點擊但不是$（'btn-class'）

回答

相關問題