it-swarm.dev

Bootstrap 3 Ukryj menu rozwijane na pozycji menu Kliknij

Sprawdź skrzypce . Mam podstawowy responsywny nawigator Bootstrap 3 w taki sposób:

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

Elementy nawigacyjne łączą się z sekcjami na stronie, a nie z różnymi stronami, więc potrzebuję listy rozwijanej, aby ukryć się po kliknięciu.

Za każdym razem, gdy próbuję ręcznie przełączać listę rozwijaną za pomocą jQuery, zakłóca to przyszłą funkcjonalność przycisku przełączania rozwijanego:

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

Czy jest na to lepsze rozwiązanie?

15
dougmacklin

Jeśli chcesz to zrobić bez JavaScript, możesz po prostu dodać cel danych i przełącznik danych do każdego elementu listy, tak jak poniżej:

<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łączania. Dziwne rzeczy dzieją się, gdy pasek nawigacyjny jest odsłonięty (przycisk przełączania nie jest wyświetlany).

24
Charly

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/

8
Gloria

Nie wiem, dlaczego klikanie/stukanie pozycji menu w menu rozwijanym w zwiniętym pasku nawigacyjnym nie powoduje automatycznego przełączania menu w Bootstrap. Może to być bardziej zgrabny sposób na zrobienie tego, ale oto jak to naprawiłem (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 linku, jedno pojawiające się zawsze, gdy wyświetlane jest przełączenie menu (w szerokości przeglądarki <768px), które przełącza menu paska nawigacyjnego, i takie, które go nie zwija (szerokości przeglądarki> 768px). Jeśli nie dodasz tego drugiego typu, pokaże on dziwny widmowy animowany poziomy pasek przewijania podczas próby przełączenia menu, gdy go tam nie ma.

3
bhall

Jestem nowym użytkownikiem Bootstrap, ale z niewielką zmianą w powyższym kodzie działa teraz pięknie. Pamiętaj, że po kliknięciu logo menu rozwijane również powinno się zamknąć, dlatego dodałem do niego nagłówek navbar-head!

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");
        });
});
2
RMattos

Z Bootstrap 3.3.4 Zrozumiałem, że mój stary sposób przestał działać. Zaktualizowano go do:

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