Come nascondere il menu a discesa Bootstrap di Twitter

Questo sta diventando fastidioso: quando clicco su un elemento in un menu a discesa Bootstrap, il menu a discesa non si chiude. Ho impostato per aprire una lightbox di Facebox quando fai clic sull'elemento a discesa, ma c'è un problema con esso.

Quello che ho provato

Quando si fa clic sull'elemento, ho provato a farlo:

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

Questo lo nasconde, ma poi per qualche motivo non si riaprirà.

Come puoi vedere, ho davvero bisogno che il menu a discesa si chiuda, perché sembra scadente quando rimane aperto (principalmente perché z-indexil menu a discesa è più alto della sovrapposizione della casella modale Facebox.

Perché non sto usando il box modale integrato di Bootstrap

Se ti stai chiedendo perché non sto usando la bella scatola modale incorporata in Bootstrap , è perché:

1. Non ha un modo per caricare contenuti al suo interno con AJAX.
2. Devi digitare HTML ogni volta per il modale; con Facebox puoi fare un semplice:$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
3. Usa le animazioni CSS3 per animare (il che sembra molto carino) ma nei browser non CSS3 mostra solo, il che non sembra così carino; Facebox utilizza JavaScript per la dissolvenza in ingresso, quindi funziona in tutti i browser.

Prova questo:

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

Questo potrebbe funzionare anche per te:

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

ho provato la maggior parte delle opzioni da qui, ma nessuna ha funzionato davvero per me. (L' $('.dropdown.open').removeClass('open');hanno nascosto, ma se ci passavi sopra con il mouse prima di fare clic su qualsiasi altra cosa, appariva di nuovo.

quindi finisco per farlo con a $("body").trigger("click")

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

Bootstrap 4 (ottobre 2018):

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

Questo può essere fatto senza scrivere codice JavaScript aggiungendo l'attributo data-toggle = "dropdown" nel tag di ancoraggio come mostrato di seguito:

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

Devi solo $('.dropdown.open').removeClass('open');rimuovere la seconda riga che nasconde il menu a discesa.

Questo è ciò che ha funzionato per me:

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

La risposta selezionata non ha funzionato per me, ma penso che sia a causa della versione più recente di Bootstrap. Ho finito per scrivere questo:

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

Si spera che sia utile a qualcun altro in futuro.

Prova questo!

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

O

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

Funziona sempre per me.

Perché usare il mio metodo, perché se l'utente esce dal div, questo metodo consente all'utente un certo ritardo prima che i sottomenu scompaiano. È proprio come usare il plugin superfish.

1) Primo download hover intent javascript

Link qui: javascript intento al passaggio del mouse

2) Ecco il mio codice da eseguire

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

Leggendo la documentazione e utilizzando JavaScript potrebbe essere fatto utilizzando il metodo toggle:

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

Puoi leggere a riguardo in: http://getbootstrap.com/javascript/#dropdowns-methods

Prova ad aprire HTML con Bootstrap Modal, io uso questo codice:

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

e il collegamento è così:

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

Ecco la mia soluzione su come chiudere il menu a discesa dei pulsanti e attivare il pulsante:

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

Dove "questo" è un contenitore globale del gruppo di pulsanti.

Bootstrap 4.1:

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

questo ha funzionato per me, avevo una barra di navigazione e diversi menu a discesa.

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

Il modo più semplice per farlo è: aggiungi un'etichetta nascosta:

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

quindi ogni volta che vuoi nascondere il menu a discesa, chiami:

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

Non so se questo aiuterà qualcuno (forse è troppo specifico per il mio caso e non per questa domanda) ma per me ha funzionato:

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

Dopo il clic:

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

Usa class = "dropdown-toggle" sul tag di ancoraggio, quindi quando fai clic sul tag di ancoraggio si chiuderà il menu a discesa bootstrap.

Ehi, questo semplice trucco di jQuery dovrebbe aiutare.

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

Il modo più semplice:

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

puoi usare questo codice nel tuo attuale gestore di eventi

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

nel mio scenario ho usato quando la chiamata ajax è stata completata

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

La selezione per attributo è il modo lento. Ecco la soluzione più veloce per nascondere il menu a discesa aperto:

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

o usa quanto segue, se il .dropdown-menu non è l'elemento figlio successivo (trova il controllo a discesa genitore più vicino):

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

Potrebbe essere stata aggiunta in retrospettiva (tuttavia, quella funzionalità non è documentata , nemmeno in Bootstrap 4.3.1), ma puoi semplicemente chiamarla con un hideparametro. Assicurati solo di chiamarlo sull'elemento toggler. Così:

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

Naturalmente, questo funziona anche al contrario con show.