So verstecken Sie das Twitter Bootstrap Dropdown

Das wird ärgerlich - wenn ich auf ein Element in einer Bootstrap-Dropdown-Liste klicke, wird die Dropdown-Liste nicht geschlossen. Ich habe es so eingerichtet, dass ein Facebox-Leuchtkasten geöffnet wird, wenn Sie auf das Dropdown-Element klicken, aber es liegt ein Problem damit vor.

Was ich versucht habe

Wenn auf das Element geklickt wird, habe ich Folgendes versucht:

    $('.dropdown.open').removeClass('open');
    $('.dropdown-menu').hide();

Das verbirgt es, aber aus irgendeinem Grund öffnet es sich nicht wieder.

Wie Sie sehen, muss das Dropdown-Menü wirklich geschlossen werden, da es beschissen aussieht, wenn es geöffnet bleibt (hauptsächlich, weil z-indexdas Dropdown-Menü höher ist als das modale Box-Overlay der Facebox.

Warum ich nicht die integrierte modale Box von Bootstrap verwende

Wenn Sie sich fragen, warum ich die in Bootstrap integrierte , gut aussehende Modalbox nicht verwende , liegt das daran, dass:

1. Es gibt keine Möglichkeit, Inhalte mit AJAX darin zu laden.
2. Sie müssen jedes Mal HTML für das Modal eingeben. Mit Facebox können Sie Folgendes einfach tun:$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
3. Es verwendet CSS3-Animationen zum Animieren (was sehr gut aussieht), aber in Nicht-CSS3-Browsern wird nur angezeigt, was nicht so gut aussieht. Facebox verwendet JavaScript zum Einblenden, sodass es in allen Browsern funktioniert.

Versuche dies:

$('.dropdown.open .dropdown-toggle').dropdown('toggle');

Dies kann auch für Sie funktionieren:

$('[data-toggle="dropdown"]').parent().removeClass('open');

Ich habe die meisten Optionen von hier aus ausprobiert, aber keine davon hat wirklich für mich funktioniert. (Das $('.dropdown.open').removeClass('open');hat es versteckt, aber wenn Sie mit der Maus darüber gegangen sind, bevor Sie auf etwas anderes geklickt haben, wurde es wieder angezeigt.

Also mache ich es mit einem $("body").trigger("click")

$('.open').removeClass('open');

Bootstrap 4 (Oktober 2018):

$('.show').removeClass('show');

Dies kann ohne Schreiben von JavaScript-Code erfolgen, indem das Attribut data-toggle = "dropdown" wie unten gezeigt in das Ankertag eingefügt wird :

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Another action</a></li>
  </ul>
</div>

Sie müssen nur $('.dropdown.open').removeClass('open');die zweite Zeile entfernen, die das Dropdown-Menü verbirgt.

Das hat bei mir funktioniert:

$(this).closest(".dropdown").find(".dropdown-toggle").dropdown("toggle");

Die ausgewählte Antwort hat bei mir nicht funktioniert, aber ich denke, das liegt an der neueren Version von Bootstrap. Am Ende schrieb ich Folgendes:

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

Hoffentlich ist das in Zukunft für jemand anderen hilfreich.

Versuche dies!

.removeClass("open").trigger("hide.bs.dropdown").trigger("hidden.bs.dropdown");

ODER

$(clicked_element).trigger("click");

Es funktioniert immer für mich.

Warum meine Methode verwenden, denn wenn der Benutzer aus dem div herauskommt, erlaubt diese Metod dem Benutzer eine gewisse Verzögerung, bevor die Untermenüs verschwinden. Es ist wie mit dem Superfish Plugin.

1) Zuerst Hover Intent Javascript herunterladen

Link hier: Hover Intent Javascript

2) Hier ist mein Code zum Ausführen

$(document).ready(function(){

        var config = {    
            over: showBootrapSubmenu,   
            timeout: 500,
            out: hideBootrapSubmenu  
        };

        function showBootrapSubmenu(){  
             $(this).addClass('open');
        }
        function hideBootrapSubmenu(){  
          $(this).removeClass('open');
            }

        //Hover intent for Submenus
        $(".dropdown").hoverIntent(config);

    });

$('.dropdown.open').removeClass('open');

Das Lesen der Dokumentation und die Verwendung von JavaScript kann mithilfe der Umschaltmethode erfolgen:

$('.button-class').on('click',function(e) {
    e.preventDefault();
    $('.dropdown-class').dropdown('toggle');
}

Sie können darüber lesen unter: http://getbootstrap.com/javascript/#dropdowns-methods

Versuchen Sie, HTML mit Bootstrap Modal zu öffnen. Ich verwende diesen Code:

$(function() {
     $('a[data-toggle=modal]').click(function(e) {
          e.preventDefault();
          var page = $(e.target).attr('href');
          var url = page.replace('#','');
          $(page).on('show', function () {
              $.ajax({
              url: "/path_to/"+url+".php/html/...",
              cache: false,
              success: function(obj){
                   $(page).css('z-index', '1999');
                   $(page).html(obj);
              }
              });
         })
     });
}); 

und der Link ist wie folgt:

<a href="#my_page" data-toggle="modal">PAGE</a>

Hier ist meine Lösung zum Schließen der Schaltfläche und zum Umschalten der Schaltfläche:

$(".btn-group.open", this)
    .trigger("click")
    .children("a.dropdown-toggle")
    .trigger("blur")

Wobei "dies" ein globaler Container der Schaltflächengruppe ist.

Bootstrap 4.1:

$(".dropdown-link").closest(".dropdown-menu").removeClass('show');

Das hat bei mir funktioniert, ich hatte eine Navigationsleiste und mehrere Pulldown-Menüs.

$(document).ready(function () {
    $('a.dropdown-toggle').each(function(){
        $(this).on("click", function () {
            $('li.dropdown').each(function () {
                $(this).removeClass('open');
            });
        });
    });
});

Der einfachste Weg, dies zu tun, ist: Sie fügen ein Fell-Label hinzu:

<label class="hide_dropdown" display='hide'></label>

Jedes Mal, wenn Sie ein Dropdown-Menü ausblenden möchten, rufen Sie Folgendes auf:

$(".hide_dropdown").trigger('click');

Ich weiß nicht, ob dies jemandem helfen wird (vielleicht ist es zu spezifisch für meinen Fall und nicht für diese Frage), aber für mich hat das funktioniert:

$('.input-group.open').removeClass('open');

Nach dem Klicken:

// Hide mobile menu
$('.in,.open').removeClass('in open');
// Hide dropdown
$('.dropdown-menu').css('display','none');
setTimeout(function(){
    $('.dropdown-menu').css('display','');
},100);

Verwenden Sie class = "dropdown-toggle" für das Ankertag. Wenn Sie dann auf das Ankertag klicken, wird das Bootstrap-Dropdown geschlossen.

Hey, dieser einfache jQuery-Trick sollte helfen.

$(".dropdown li a").click(function(){
$(".dropdown").removeClass("open");
});

Der einfachste Weg:

  $('.navbar-collapse a').click(function(){
    $('.navbar-toggle').trigger('click')
  })

Sie können diesen Code in Ihrem aktuellen Ereignishandler verwenden

$('.in,.open').removeClass('in open');

In meinem Szenario habe ich verwendet, wenn der Ajax-Aufruf abgeschlossen ist

jQuery(document).on('click', ".woocommerce-mini-cart__buttons .wc-forward.checkout", function() {
    var _this = jQuery(this);
    ajax_call(_this.attr("data-ajax-href"), "checkout-detail");
    $('.in,.open').removeClass('in open');
    return false;
});

Die Auswahl nach Attributen ist der langsame Weg. Hier ist die schnellste Lösung, um das geöffnete Dropdown auszublenden:

$(".dropdown-menu.show").parent().dropdown("toggle");

oder verwenden Sie Folgendes, wenn das .dropdown-Menü nicht das nächste untergeordnete Element ist (suchen Sie das nächstgelegene übergeordnete Dropdown-Steuerelement):

$(".dropdown-menu.show").closest(".dropdown").dropdown("toggle");

Es wurde möglicherweise im Nachhinein hinzugefügt (obwohl diese Funktion selbst in Bootstrap 4.3.1 nicht dokumentiert ist), aber Sie können sie einfach mit einem hideParameter aufrufen . Stellen Sie einfach sicher, dass Sie es für das toggler-Element aufrufen. Wie so:

$('.dropdown-toggle').dropdown('hide');
// or
$('[data-toggle="dropdown"]').dropdown('hide');

Dies funktioniert natürlich auch umgekehrt mit show.