Como ocultar o menu suspenso do Twitter Bootstrap

Isso está ficando irritante - quando eu clico em um item em uma lista suspensa do Bootstrap, a lista suspensa não fecha. Eu configurei para abrir uma caixa de luz do Facebox quando você clica no item suspenso, mas há um problema com ele.

O que eu tentei

Quando o item é clicado, tentei fazer o seguinte:

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

Isso o esconde, mas por algum motivo ele não abrirá novamente.

Como você pode ver, eu realmente preciso que a lista suspensa seja fechada, porque parece uma porcaria quando permanece aberta (principalmente porque o z-indexda lista suspensa é mais alto do que a sobreposição da caixa modal Facebox.

Por que não estou usando a caixa modal embutida do Bootstrap

Se você está se perguntando por que não estou usando a bela caixa modal embutida no Bootstrap , é porque:

1. Ele não tem uma maneira de carregar conteúdo com AJAX.
2. Você tem que digitar HTML todas as vezes para o modal; com o Facebox, você pode fazer um simples:$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
3. Ele usa animações CSS3 para animar (o que parece muito bom), mas em navegadores não CSS3 ele apenas mostra, o que não parece muito bom; Facebox usa JavaScript para fade in, de forma que funciona em todos os navegadores.

Experimente isto:

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

Isso também pode funcionar para você:

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

tentei a maioria das opções a partir daqui, mas nenhuma delas funcionou realmente para mim. (O $('.dropdown.open').removeClass('open');ocultava, mas se você mexia antes de clicar em qualquer outra coisa, ele aparecia novamente.

então acabei fazendo isso com um $("body").trigger("click")

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

Bootstrap 4 (outubro de 2018):

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

Isso pode ser feito sem escrever o código JavaScript, adicionando o atributo data-toggle = "dropdown" na tag âncora, conforme mostrado abaixo:

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

Você só precisa $('.dropdown.open').removeClass('open');remover a segunda linha que oculta o menu suspenso.

Isto é o que funcionou para mim:

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

A resposta selecionada não funcionou para mim, mas acho que é por causa da versão mais recente do Bootstrap. Acabei escrevendo isso:

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

Espero que isso seja útil para alguém no futuro.

Experimente isso!

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

OU

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

Sempre funciona para mim.

Por que usar o meu método, porque se o usuário sair do div, este método permite ao usuário um certo atraso antes que os submenus desapareçam. É como usar o plugin superfish.

1) Primeiro download hover intent javascript

Link aqui: javascript de intenção de passar o mouse

2) Aqui está meu código para executar

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

A leitura da documentação e o uso de JavaScript podem ser feitos com o método toggle:

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

Você pode ler sobre isso em: http://getbootstrap.com/javascript/#dropdowns-methods

Tente abrir HTML com Bootstrap Modal, eu 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);
              }
              });
         })
     });
}); 

e o link é assim:

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

Aqui está minha solução sobre como fechar a lista suspensa do botão e alternar o botão:

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

Onde "this" é um contêiner global do grupo de botões.

Bootstrap 4.1:

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

Isso funcionou para mim, eu tinha uma barra de navegação e vários menus suspensos.

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

A maneira mais fácil de fazer isso é: você adiciona um rótulo de ocultação:

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

então, sempre que quiser ocultar o menu suspenso, você chama:

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

Não sei se isso vai ajudar alguém (talvez seja muito específico para o meu caso, e não para esta questão), mas para mim funcionou:

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

Depois de clicar:

// 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" na tag âncora e, ao clicar na tag âncora, o menu suspenso de bootstrap será fechado.

Ei, este truque simples do jQuery deve ajudar.

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

A maneira mais fácil:

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

você pode usar este código em seu manipulador de eventos atual

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

no meu cenário eu usei quando a chamada ajax completa

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

Selecionar por atributo é a maneira mais lenta. Aqui está a solução mais rápida para ocultar o menu suspenso aberto:

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

ou use o seguinte, se o menu suspenso não for o próximo elemento filho (encontre o controle suspenso pai mais próximo):

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

Ele pode ter sido adicionado em retrospecto (embora esse recurso não esteja documentado , mesmo no Bootstrap 4.3.1), mas você pode simplesmente chamá-lo com um hideparâmetro. Apenas certifique-se de chamá-lo no elemento toggler. Igual a:

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

Claro, isso também funciona ao contrário com show.