So verbergen Sie das Dropdown-Menü von Twitter Bootstrap

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

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

Bootstrap 4 (Oktober 2018):

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

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

Das hat bei mir funktioniert:

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

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>

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.

Versuche dies!

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

OR

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

Es funktioniert immer für mich.

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

    });

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

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>

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

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.

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

Der einfachste Weg:

  $('.navbar-collapse a').click(function(){
    $('.navbar-toggle').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');

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');
            });
        });
    });
});

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

Bootstrap 4.1:

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

Nach klick:

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

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

Hey, dieser einfache jQuery-Trick sollte helfen.

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