web-dev-qa-db-de.com

So verbergen Sie das Dropdown-Menü von Twitter Bootstrap

Das wird ärgerlich - wenn ich auf ein Element in einer Bootstrap-Dropdown-Liste klicke, wird die Dropdown-Liste nicht geschlossen. Ich habe es eingerichtet, eine Facebox-Lightbox zu öffnen, wenn Sie auf das Dropdown-Element klicken, aber es gibt ein Problem damit. 

enter image description here


Was ich versucht habe

Wenn das Element angeklickt wurde, habe ich Folgendes versucht: 

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

Das verbirgt es, aber aus irgendeinem Grund lässt es sich nicht wieder öffnen.

Wie Sie sehen, brauche ich zum Schließen wirklich das Dropdown-Menü, weil es beschissen aussieht, wenn es geöffnet bleibt (hauptsächlich, weil der z-index des Dropdown-Menüs höher ist als die modifizierte Boxbox-Überlagerung von Facebox).


Warum verwende ich nicht die eingebaute modale Box von Bootstrap

Wenn Sie sich fragen, warum ich nicht die schön aussehende modale Box eingebaut in Bootstrap - verwende, liegt dies an:

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

Versuche dies:

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

Das kann auch für Sie funktionieren:

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

die meisten Optionen habe ich hier ausprobiert, aber keiner von ihnen hat wirklich für mich funktioniert. (Die $('.dropdown.open').removeClass('open'); verdeckte es, aber wenn Sie vor dem Klicken auf etwas anderes die Maus überquerten, wurde es wieder angezeigt. 

so endete ich es mit einer $("body").trigger("click")

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

Bootstrap 4 (Oktober 2018):

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

Sie müssen lediglich $('.dropdown.open').removeClass('open'); die zweite Zeile entfernen, wodurch das Dropdown-Menü ausgeblendet wird.

7
Gurinder

Das hat bei mir funktioniert:

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

Dies kann ohne das Schreiben von JavaScript-Code durch Hinzufügen des Attributs data-toggle = "dropdown" in den Anker-Tag erfolgen, wie unten gezeigt: 

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

5
Shivaji Mutkule

Die ausgewählte Antwort hat für mich nicht funktioniert, aber ich denke, es liegt an der neueren Version von Bootstrap. Am Ende habe ich das geschrieben:

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

Hoffentlich ist das in der Zukunft für jemanden anderen hilfreich.

4
scolja

Versuche dies!

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

OR

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

Es funktioniert immer für mich.

3
bbc_danang

Warum sollte ich meine Methode verwenden, denn wenn der Benutzer das div verlässt, gibt dieser Befehl dem Benutzer eine gewisse Verzögerung, bevor die Untermenüs verschwinden. Es ist wie mit dem Superfish-Plugin.

1) Laden Sie das Hover-Javascript zuerst herunter

Link hier: Hover Absicht 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);

    });
3
Sylvain
$('.dropdown.open').removeClass('open');
2

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

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

Wenn Sie die Dokumentation lesen und JavaScript verwenden, können Sie die Toggle-Methode verwenden:

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

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

2
Alfchee

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 "this" ein globaler Container der Tastengruppe ist.

1
Igor Aloise Lod

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

0
Zeeshan Jan

Der einfachste Weg:

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

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');
0
Arek

das funktionierte für mich, ich hatte eine Navbar und mehrere Pulldown-Menüs.

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

sie können diesen Code in Ihrem aktuellen Ereignishandler verwenden 

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

in meinem Szenario habe ich verwendet, wenn ajax call 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;
});
0
Qaisar irfan

Bootstrap 4.1:

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

Nach klick:

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

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

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

wenn Sie dann das Dropdown-Menü ausblenden möchten, rufen Sie Folgendes an:

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

Hey, dieser einfache jQuery-Trick sollte helfen.

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