如何摺疊導航欄菜單隻點擊，不打開，無法弄清楚這一個

好吧，所以我試圖創建一個導航欄，當鏈接關閉時摺疊漢堡菜單。問題是我正在使用的方法也會在點擊鏈接時打開漢堡菜單。這對導航欄中的所有常規鏈接都可以。但我不希望這種情況發生在導航品牌上。我需要它只在打開菜單時摺疊菜單。但是，即使菜單關閉，導航欄品牌也會打開它。如何摺疊導航欄菜單隻點擊，不打開，無法弄清楚這一個

這裏是代碼，我嘗試了各種各樣的javascript，但我想我需要幫助我的具體情況。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#brand" data-target="#navbar"><img style="height:31px; width:170px;" src="images/img.svg"></a> 

     <!-- Start Collapse Button --> 
     <button type="button" class="navbar-toggle collapsed" 
       data-toggle="collapse" data-target="#navbar" aria-expanded="false" 
       aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
     </button> 
     <!-- End Collapse Button --> 
    </div> 

    <!-- Start Links --> 
    <div id="navbar" class="navbar-collapse collapse"> 

     <!-- Left Links --> 
     <ul class="nav navbar-nav"> 
      <li><a href="#it" data-toggle="collapse" data-target="#navbar">IT</a></li> 
      <li><a href="#cloud" data-toggle="collapse"data-target="#navbar">CLOUD</a></li> 
      <li><a href="#hipaa" data-toggle="collapse"data-target="#navbar">HIPAA</a></li> 
      <li><a href="#security" data-toggle="collapse"data-target="#navbar">SECURITY</a></li> 
      <li><a href="#contactus" data-toggle="collapse"data-target="#navbar">CONTACT US</a></li> 
      <li><a href="#aboutus" data-toggle="collapse"data-target="#navbar">ABOUT</a></li> 
     </ul> 

    </div> 
    <!-- End Links --> 
</div>

來源

2015-06-27 ksalah

jQuery代碼，請！你能告訴我在哪裏做什麼，「問題在於我使用的方法也會在點擊鏈接時打開漢堡包菜單」。 –

我把你的代碼放在[pen]（http://codepen.io/anon/pen/rVpmrp）中，我似乎無法複製你遇到的問題。我只能假設你有導致此行爲的頁面上的其他JavaScript代碼。 –

在你的筆中，如果你注意到了。點擊導航欄品牌不會關閉菜單。我怎麼能做到這一點，而不是相反 – ksalah

您可以掛接到漢堡的單擊事件和重置，菜單上的CSS類

$('.navbar-brand').click(function() { 
 
    $('.navbar-toggle').attr('aria-expanded', false); 
 
    $('.navbar-toggle').addClass('collapsed'); 
 
    $('.navbar-collapse').attr('aria-expanded', false); 
 
    $('.navbar-collapse').addClass('collapse'); 
 
    $('.navbar-collapse').removeClass('in'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#brand" data-target="#navbar"> 
 
     <img style="height:31px; width:170px;" src="http://lorempixel.com/170/31" /> 
 
     </a> 
 

 
     <!-- Start Collapse Button --> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> 
 
     <!-- End Collapse Button --> 
 
    </div> 
 
    <!-- Start Links --> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
     <!-- Left Links --> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#it" data-toggle="collapse" data-target="#navbar">IT</a> 
 

 
     </li> 
 
     <li><a href="#cloud" data-toggle="collapse" data-target="#navbar">CLOUD</a> 
 

 
     </li> 
 
     <li><a href="#hipaa" data-toggle="collapse" data-target="#navbar">HIPAA</a> 
 

 
     </li> 
 
     <li><a href="#security" data-toggle="collapse" data-target="#navbar">SECURITY</a> 
 

 
     </li> 
 
     <li><a href="#contactus" data-toggle="collapse" data-target="#navbar">CONTACT US</a> 
 

 
     </li> 
 
     <li><a href="#aboutus" data-toggle="collapse" data-target="#navbar">ABOUT</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- End Links --> 
 
    </div>

來源

2015-06-28 19:31:50

謝謝，這對我來說非常合適。 – ksalah

如何摺疊導航欄菜單隻點擊，不打開，無法弄清楚這一個

回答

相關問題