jquery - plugin - bootstrap tabs events

Cómo ocultar el menú desplegable de Twitter Bootstrap

Question

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 un lightbox de Facebox cuando haces clic en el elemento desplegable pero hay un problema con él.

Lo que he intentado

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 abrirá nuevamente.

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

Por qué no estoy usando el cuadro modal integrado de Bootstrap

Si te estás preguntando por qué no estoy usando el atractivo cuadro modal integrado en Bootstrap , es porque:

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

Answer 1

¡Prueba esto!

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

O

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

Siempre me funciona.

Answer 2

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

1) Primero descargar la intención de hover javascript

Enlace aquí: intento de hover 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);

    });

Answer 3

Al leer la documentación y usar JavaScript, se puede hacer usando el método de alternar:

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

Puede leer sobre esto en: http://getbootstrap.com/javascript/#dropdowns-methods

Answer 4

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

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

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

Answer 5

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

Answer 6

Esto es lo que funcionó para mí:

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

Answer 7

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>

Answer 8

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>

Answer 9

La forma más fácil de hacerlo es: agrega una etiqueta oculta:

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

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

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

Answer 10

La manera easist:

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

Answer 11

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

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

Espero que eso sea útil para otra persona en el futuro.

Answer 12

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

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

Answer 13

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

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

Answer 14

Prueba esto:

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

Esto también puede funcionar para usted:

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

Answer 15

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

Answer 16

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

Answer 17

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

Answer 18

probé la mayoría de las opciones desde aquí, pero ninguna de ellas realmente funcionó para mí. ( $(''.dropdown.open'').removeClass(''open''); lo ocultó, pero si pasó por encima antes de hacer clic en cualquier otra cosa, apareció de nuevo.

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

Answer 19

puedes usar este código en tu controlador de eventos actual

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

en mi escenario que utilicé cuando se completa 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;
});

Answer 20

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

Answer 21

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