Bootstrap 3 Menü Öğesinde Açılır Menüyü Gizle

Question

Check out the fiddle'u tıklatın.

<div id="navbar" class="navbar navbar-fixed-top navbar-inverse"> 
     <div class="container"> 
      <a id="navbar-toggle" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </a> 

      <a class="navbar-brand" href="#">Title Title Title</a> 

      <div id="nav-collapse" class="nav-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#option1">Option 1</a></li> 
        <li><a href="#option2">Option 2</a></li> 
        <li><a href="#option3">Option 3</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

nav ürün yerine farklı sayfalara göre, sayfadaki bölümleriyle bağlantı yüzden tıklamada gizlemek için açılan gerekir: Bir temel Bootstrap 3 tepkili nav şöyle var.

el jQuery ile açılır menüde geçiş çalıştığınızda zaman, bu açılan iki durumlu düğme gelecekteki işlevselliğini karıştıran biridir:

$("#navbar li a").click(function(event) { 
    // check if window is small enough so dropdown is created 
    $("#navbar-toggle").is(":visible") 
     $("#nav-collapse").toggle(); 
}); 

daha iyi bir düzeltme bunun için var mı?

$(document).ready(function() { 
    $("#navbar li a").click(function(event) { 
     // check if window is small enough so dropdown is created 
     $("#navbar-toggle").is(":visible") 
      $("#nav-collapse").toggle(); 
    }); 
    }); 

Buna: Bu

Answer 1

Bkz Her bir liste öğesine şu şekilde:

<li data-toggle="collapse" data-target=".nav-collapse"><a href="#option1">Option 1</a></li> 
<li data-toggle="collapse" data-target=".nav-collapse"><a href="#option2">Option 2</a></li> 
<li data-toggle="collapse" data-target=".nav-collapse"><a href="#option3">Option 3</a></li> 

Navbar için, bu gerçekten bir geçiş düğmesi olduğunda, mobil görünüm modunda çalışır. Navbar maruz kaldığında garip şeyler olur (geçiş düğmesi göstermiyor).

Answer 2

Değişim Eğer sadece veri hedef ve veri geçiş öğesini ekleyebilirsiniz JavaScript olmadan bunu yapmak istiyorsa

$(document).ready(function() { 
    $("#navbar li a").click(function(event) { 
     // check if window is small enough so dropdown is created 
    $("#nav-collapse").removeClass("in").addClass("collapse"); 
    }); 
}); 

http://jsfiddle.net/fw7vh/4/

Answer 3

Daraltılmış bir navbardaki menü açılır menüsünde menü öğesinin tıklanmasının/tıklatılmasının neden otomatik olarak Bootstrap menüsünü değiştirmediğini bilmiyorum. bağlantının iki sürümü, her menü geçiş düğmesini görüntülenir biri vardır

<li class="visible-xs"> 
    <a href="#" data-toggle="collapse" data-target=".navbar-collapse">Link</a> 
</li> 
<li class="hidden-xs"> 
    <a href="#">Link</a> 
</li> 

Temelde: burada (Önyükleme 3.0.3 kullanarak) tamir ettim nasıl Orada bunu yapmanın bir daha zarif bir yolu olabilir, ama navbar menüsünü değiştirecek olan tarayıcı genişlikleri (< 768px'de) ve onu daraltmayan (tarayıcı genişlikleri> 768px) gösterilir. Bu ikinci türü eklemezseniz, orada olmadığında menüyü açmaya çalışırken garip bir hayali animasyonlu yatay kaydırma çubuğu gösterecektir.

Answer 4

Bootstrap'ta yeniyim, ancak yukarıdaki kodla küçük bir değişiklik yaptım, şimdi güzel çalışıyor. Logonun üzerine tıkladığınızda açılan menünün de kapanması gerektiğini unutmayın, bu yüzden navbar-header'ı ekledim!

jQuery(document).ready(function() { 
     jQuery(".nav a, .navbar-header a").click(function(event) { 
       // check if window is small enough so dropdown is created 
       jQuery(".navbar-collapse").removeClass("in").addClass("collapse"); 
     }); 
}); 

Answer 5

Bootstrap ile 3.3.4 Eski yolumun çalışmayı bıraktığını fark ettim. Güncelleştirme:

if ($('div.navbar-collapse').hasClass('in')) { 
    $('button.navbar-toggle:visible').click(); 
}