it-swarm.com.de

Bootstrap 3 Hide Dropdown-Menü bei Menüelement Klicken Sie auf

Überprüfe die Geige . Ich habe ein einfaches Bootstrap 3-fähiges Navi:

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

Die Nav-Elemente haben einen Link zu Abschnitten auf der Seite und nicht zu verschiedenen Seiten. Ich brauche also das Dropdown-Menü, um sich beim Klicken auszublenden.

Jedes Mal, wenn ich versuche, das Dropdown-Menü manuell mit jQuery umzuschalten, wird die zukünftige Funktionalität der Dropdown-Schaltfläche beeinträchtigt:

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

Gibt es eine bessere Lösung für dieses Problem?

15
dougmacklin

Wenn Sie dies ohne JavaScript tun möchten, können Sie einfach das Datenziel und den Datenumschalter zu jedem Listenelement hinzufügen.

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

Für die Navbar funktioniert dies im mobilen Ansichtsmodus wirklich nur, wenn ein Umschaltknopf vorhanden ist. Seltsame Dinge passieren, wenn die Navigationsleiste angezeigt wird (die Umschaltfläche wird nicht angezeigt).

24
Charly

Ändere das:

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

zu diesem:

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

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

8
Gloria

Ich weiß nicht, warum das Klicken/Tippen auf ein Menüelement in einem Dropdown-Menü in einer ausgeblendeten Navigationsleiste das Menü in Bootstrap nicht automatisch umschaltet. Es gibt vielleicht einen eleganteren Weg, dies zu tun, aber wie ich es behoben habe (mit 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>

Grundsätzlich gibt es zwei Versionen des Links, eine, die immer dann angezeigt wird, wenn der Menüumschalter angezeigt wird (bei Browserbreiten <768px), um das Navigationsleistenmenü umzuschalten, und eine, bei der das Menü nicht eingeblendet wird (Browserbreite> 768px). Wenn Sie diesen zweiten Typ nicht hinzufügen, wird eine seltsame, animierte horizontale Bildlaufleiste angezeigt, wenn Sie versuchen, das Menü umzuschalten, wenn es nicht vorhanden ist.

3
bhall

Ich bin neu bei Bootstrap, aber mit einem kleinen Code, der an den obigen Code angepasst wurde, funktioniert es jetzt wunderbar. Wenn Sie auf das Logo klicken, sollte sich auch das Dropdown-Menü schließen. Aus diesem Grund habe ich Navbar-Header hinzugefügt!

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

Mit Bootstrap 3.3.4 wurde mir klar, dass meine alte Arbeitsweise beendet wurde. Es wurde aktualisiert zu:

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