Jak ukryć menu rozwijane Twitter Bootstrap

To staje się irytujące - kiedy klikam element w menu rozwijanym Bootstrap, menu nie zamyka się. Mam skonfigurowane otwieranie lightboxa Facebox po kliknięciu elementu rozwijanego, ale jest z nim problem.

Czego próbowałem

Po kliknięciu elementu próbowałem zrobić to:

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

To go ukrywa, ale z jakiegoś powodu nie otwiera się ponownie.

Jak widać, naprawdę potrzebuję, aby lista rozwijana była zamknięta, ponieważ wygląda kiepsko, gdy pozostaje otwarta (głównie dlatego, z-indexże lista rozwijana jest wyższa niż nakładka pola modalnego Facebox).

Dlaczego nie używam wbudowanego modułu modalnego Bootstrap

Jeśli zastanawiasz się, dlaczego nie używam ładnie wyglądającego modalu wbudowanego w Bootstrap , to dlatego, że:

1. Nie ma sposobu, aby załadować do niego zawartość za pomocą AJAX.
2. Musisz wpisać HTML za każdym razem dla modalu; z Faceboxem możesz zrobić proste:$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
3. Używa animacji CSS3 do animacji (co wygląda bardzo ładnie), ale w przeglądarkach innych niż CSS3 po prostu pokazuje, co nie wygląda tak ładnie; Facebox używa JavaScript do pojawiania się, więc działa we wszystkich przeglądarkach.

Spróbuj tego:

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

Może to również działać dla Ciebie:

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

Wypróbowałem większość opcji tutaj, ale żadna z nich nie działała dla mnie. ( $('.dropdown.open').removeClass('open');ukryły to, ale jeśli najechałeś kursorem myszy przed kliknięciem czegokolwiek innego, pojawiło się ponownie.

więc w końcu robię to z $("body").trigger("click")

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

Bootstrap 4 (październik 2018):

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

Musisz tylko $('.dropdown.open').removeClass('open');usunąć drugą linię, która ukrywa menu rozwijane.

Można to zrobić bez pisania kodu JavaScript, dodając atrybut data-toggle = "dropdown" do tagu kotwicy, jak pokazano poniżej:

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

Oto, co zadziałało dla mnie:

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

Wybrana odpowiedź nie działała dla mnie, ale myślę, że to z powodu nowszej wersji Bootstrap. Skończyło się na napisaniu tego:

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

Mam nadzieję, że w przyszłości przyda się to komuś innemu.

Spróbuj tego!

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

LUB

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

To zawsze działa na mnie.

Po co używać mojej metody, ponieważ jeśli użytkownik wyjdzie z div, ta metoda pozwala użytkownikowi z pewnym opóźnieniem, zanim znikną podmenu. To tak, jakbyś używał wtyczki superfish.

1) Pierwsze pobranie javascript intent hover

Link tutaj: Hover intent javascript

2) Oto mój kod do wykonania

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

Czytając dokumentację i używając JavaScript można to zrobić metodą toggle:

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

Możesz o tym przeczytać w: http://getbootstrap.com/javascript/#dropdowns-methods

Spróbuj otworzyć HTML za pomocą Bootstrap Modal, używam tego kodu:

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

a link wygląda tak:

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

Oto moje rozwiązanie, jak zamknąć menu rozwijane przycisku i przełączyć przycisk:

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

Gdzie „this” to globalny kontener grupy przycisków.

Bootstrap 4.1:

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

to działało dla mnie, miałem pasek nawigacyjny i kilka menu rozwijanych.

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

Najłatwiej to zrobić: dodaj ukrytą etykietę:

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

wtedy za każdym razem, gdy chcesz ukryć listę rozwijaną, dzwonisz:

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

Nie wiem, czy to komuś pomoże (może jest to zbyt specyficzne dla mojego przypadku, a nie dla tego pytania), ale dla mnie to zadziałało:

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

Po kliknięciu:

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

Użyj class = "dropdown-toggle" na tagu kotwicy, a po kliknięciu tagu kotwicy zamknie on rozwijane menu bootstrap.

Hej, ta prosta sztuczka z jQuery powinna pomóc.

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

Najłatwiejszy sposób:

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

możesz użyć tego kodu w swojej bieżącej obsłudze zdarzeń

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

w moim scenariuszu użyłem po zakończeniu połączenia Ajax

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

Wybór według atrybutu jest powolny. Oto najszybsze rozwiązanie umożliwiające ukrycie otwartego menu:

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

lub użyj poniższego, jeśli .dropdown-menu nie jest kolejnym elementem podrzędnym (znajdź najbliższą rozwijaną kontrolkę nadrzędną):

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

Mogło zostać dodane z perspektywy czasu (chociaż ta funkcja nie jest udokumentowana , nawet w Bootstrap 4.3.1), ale możesz ją po prostu wywołać z hideparametrem. Po prostu upewnij się, że wywołujesz to w elemencie toggler. Tak jak to:

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

Oczywiście działa to również w odwrotnej kolejności z show.