Bootstrap 3 Ukryj menu rozwijane w pozycji menu Kliknij przycisk

Question

. Mam podstawową Bootstrap 3 reaguje nav tak:

<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 elementów odwołuje się do sekcji na stronie, zamiast różnych stron, więc muszę listę rozwijaną do ukrycia na kliknięcia.

Ilekroć próbuję przełączyć rozwijaną ręcznie z jQuery, to bałagan przyszłą funkcjonalność przycisku przełączającego rozwijanej:

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

czy istnieje lepszy fix do tego?

Answer 1

Jeśli chciał to zrobić bez JavaScriptu można po prostu dodać dane docelowe i komputerowe przełącznika do każdej pozycji listy, na przykład:

<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> 

W przypadku paska nawigacyjnego działa to tylko w trybie widoku mobilnego, gdy jest przycisk przełączający. Dziwne rzeczy dzieją się po odsłonięciu paska nawigacyjnego (przycisk przełączania nie jest wyświetlany).

Answer 2

Zmień to:

$(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(); 
    }); 
    }); 

do tego:

$(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"); 
    }); 
}); 

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

Answer 3

Nie wiem, dlaczego kliknięcie/stuknięcie w pozycji menu w menu rozwijanym w zwiniętym pasku nawigacyjnym nie powoduje automatycznego przełączenia menu w opcji Bootstrap. Nie może być bardziej elegancki sposób to zrobić, ale oto jak naprawiłem go (używając Bootstrap 3.0.3):

<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> 

Zasadniczo istnieją dwie wersje, jeden link, który pojawia się zawsze, gdy przełącznik Menu jest wyświetlane (przy szerokościach przeglądarek < 768px), które przełącza menu na pasku nawigacyjnym i takie, które go nie zwija (przeglądarki o szerokości> 768 pikseli). Jeśli nie dodasz tego drugiego typu, po włączeniu menu, gdy go nie ma, wyświetli się dziwny animowany poziomy pasek przewijania.

Answer 4

Jestem nowy w Bootstrapie, ale z niewielką zmianą na powyższy kod działa teraz pięknie. Pamiętaj, że po kliknięciu na logo menu powinno również zostać zamknięte, dlatego dodałem do niego nagłówek nawigacji!

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

Z Bootstrap 3.3.4 Zrozumiałem, że mój stary sposób na rzucenie pracy. Zaktualizowano do:

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