Cómo ocultar el menú desplegable de Bootstrap de Twitter

Esto se está volviendo molesto: cuando hago clic en un elemento en un menú desplegable de Bootstrap, el menú desplegable no se cierra. Lo tengo configurado para abrir una caja de luz de Facebox cuando haces clic en el elemento desplegable, pero hay un problema con él.

Lo que he probado

Cuando se hace clic en el elemento, intenté hacer esto:

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

Eso lo oculta, pero luego, por alguna razón, no se volverá a abrir.

Como puede ver, realmente necesito que el menú desplegable se cierre, porque se ve horrible cuando permanece abierto (principalmente porque el z-indexdel menú desplegable es más alto que la superposición del cuadro modal de Facebox.

Por que no estoy usando el cuadro modal incorporado de Bootstrap

Si se pregunta por qué no estoy usando el cuadro modal de aspecto agradable integrado en Bootstrap , es porque:

1. No tiene forma de cargar contenido con AJAX.
2. Tienes que escribir HTML cada vez para el modal; con Facebox puedes hacer algo simple:$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
3. Utiliza animaciones CSS3 para animar (que se ve muy bien) pero en navegadores que no son CSS3 simplemente se muestra, lo que no se ve tan bien; Facebox usa JavaScript para aparecer, por lo que funciona en todos los navegadores.

Prueba esto:

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

Esto también puede funcionar para usted:

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

Probé la mayoría de las opciones de aquí, pero ninguna de ellas funcionó para mí. (Lo $('.dropdown.open').removeClass('open');ocultó, pero si pasaba el mouse antes de hacer clic en cualquier otra cosa, aparecía nuevamente.

así que terminé haciéndolo con un $("body").trigger("click")

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

Bootstrap 4 (octubre de 2018):

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

Esto se puede hacer sin escribir código JavaScript agregando el atributo data-toggle = "dropdown" en la etiqueta de anclaje como se muestra a continuación:

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

Solo necesita $('.dropdown.open').removeClass('open');eliminar la segunda línea que oculta el menú desplegable.

Esto es lo que funcionó para mí:

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

La respuesta seleccionada no funcionó para mí, pero creo que se debe a la versión más nueva de Bootstrap. Terminé escribiendo esto:

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

Con suerte, eso será útil para otra persona en el futuro.

¡Prueba esto!

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

O

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

Siempre me funciona.

Por qué usar mi método, porque si el usuario sale del div, este método le permite al usuario un cierto retraso antes de que los submenús desaparezcan. Es como usar el complemento superfish.

1) Primera descarga de hover intent javascript

Enlace aquí: Hover intent javascript

2) Aquí está mi código para ejecutar

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

La lectura de la documentación y el uso de JavaScript se puede hacer mediante el método de alternancia:

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

Puede leerlo en: http://getbootstrap.com/javascript/#dropdowns-methods

Intente abrir HTML con Bootstrap Modal, uso este código:

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

y el enlace es así:

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

Aquí está mi solución sobre cómo cerrar el menú desplegable del botón y alternar el botón:

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

Donde "esto" es un contenedor global del grupo de botones.

Bootstrap 4.1:

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

esto funcionó para mí, tenía una barra de navegación y varios menús desplegables.

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

La forma más sencilla de hacer esto es: agrega una etiqueta oculta:

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

luego, cada vez que desee ocultar el menú desplegable, llame a:

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

No sé si esto ayudará a alguien (tal vez sea demasiado específico para mi caso y no para esta pregunta) pero para mí esto funcionó:

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

Después de hacer clic:

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

Use class = "dropdown-toggle" en la etiqueta de anclaje, luego, cuando haga clic en la etiqueta de anclaje, se cerrará el menú desplegable de arranque.

Oye, este simple truco de jQuery debería ayudar.

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

La forma más fácil:

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

puede usar este código en su controlador de eventos actual

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

en mi escenario utilicé cuando se completó la llamada 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;
});

Seleccionar por atributo es la forma más lenta. Aquí está la solución más rápida para ocultar el menú desplegable abierto:

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

o use lo siguiente, si el menú desplegable no es el siguiente elemento secundario (busque el control desplegable principal más cercano):

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

Es posible que se haya agregado en retrospectiva (aunque esa característica no está documentada , incluso en Bootstrap 4.3.1), pero simplemente puede llamarla con un hideparámetro. Solo asegúrese de llamarlo en el elemento conmutador. Al igual que:

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

Por supuesto, esto también funciona a la inversa con show.