0

Estou usando o seguinte script para que o dropdown menu do Bootstrap não se feche quando se clica em algum outro ponto da página:

$(document.body).on('click', function(event){
    var windowWidth = $(window).width();
    if(windowWidth > 991){
        if (!$(event.target).closest('.dropdown-toggle').length) {
            event.stopPropagation();
        }
    }
});

O problema é que todos os outros módulos (carousel, panel, etc) param de funcionar. Alguma dica?

http://codepen.io/marcelo2605/pen/vGRyLr

3
  • Ola, para mim a sua questão está muito vaga. consegue fazer um jsfiddle que tenha o constragimento? Commented 13/04/2016 às 14:50
  • @TiagoGomes Coloquei um exemplo no CodePen. Commented 13/04/2016 às 14:56
  • Marque uma resposta como certa por favor. (Se já estiver resolvido) para a pergunta não ficar aberta. Commented 15/04/2016 às 13:53

5 Respostas 5

1

Achei essa solução:

HTML

<li role="presentation" class="dropdown keep-open"> <a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown1 <span class="caret"></span> </a>
    <ul id="menu3" class="dropdown-menu" aria-labelledby="drop6">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>

Javascript

$('.dropdown.keep-open').on({
    "shown.bs.dropdown": function() { this.closable = false; },
    "click":             function() { this.closable = true; },
    "hide.bs.dropdown":  function() { return this.closable; }
});
1
  • Ola, não tentei repetir, simplesmente estava a fazer a resposta quando criou a sua. Commented 13/04/2016 às 17:24
1

Desculpe, entendi o que você queria, experimente fazer isso:

Editei a pergunta, veja se atende ao seu propósito:

  $(function() {
    $('.dropdown.opened')
    .on({
        "shown.bs.dropdown": function() { 
            this.closable = ($('.dropdown.open').length > 1) ? true : false 
         },
        "click": function() {
           this.closable = true; 
           $('.dropdown.opened.open').trigger('click');
        },
        "hide.bs.dropdown":  function() { return this.closable; }
    });
 });

Aqui tem o exemplo funcionando no JSFiddle

5
  • 1
    O objetivo é mesmo detetar os clicks fora do menu e não dentro do menu. Para o que percebi. Commented 13/04/2016 às 16:23
  • @Ivan Ferrer Ivan, o Tiago está certo. Preciso detectar quando o menu não é clicado para mantê-lo aberto. Commented 13/04/2016 às 16:48
  • Editei a pergunta para ficar mais objetiva. Commented 13/04/2016 às 18:33
  • @IvanFerrer Ivan, no primeiro click, o menu se fecha. Ele só se mantém aberto se eu fechar e abrir de novo. Commented 13/04/2016 às 20:13
  • Veja se está certo agora, não entendi o negativo, mas a ideia é que você feche um para poder abrir o outro, já que você quer fixar o menu... Commented 13/04/2016 às 20:21
1

A solução que encontrei foi:
Se não for para esconder então grava o que está aberto e depois abre novamente.

Ficou assim.:

$(document.body).on('click', function(event){
    var windowWidth = $(window).width();
    if(windowWidth > 991){
        if (!$(event.target).closest('.dropdown-toggle').length) {
            var obj=$('.dropdown.open');
            setTimeout(function(){obj.addClass('open');},0);
        }
    }
});

O exemplo no jsfiddle.

6
  • Legal. Resolveu o problema. Mas o menu dá uma piscada quando outro item da página é clicado. Tem como resolver? Commented 13/04/2016 às 15:43
  • Pois eu reparei mas não estou a ver como ultrapassar, se lembrar de algo edito :D Commented 13/04/2016 às 15:51
  • Tentei dar um return false no evento hide.bs.dropdown. Mas depois ele não volta a funcionar. Commented 13/04/2016 às 15:55
  • O problema da piscada é o setTimeout(), coloca -1 Commented 13/04/2016 às 16:12
  • O -1 não resolveu Commented 13/04/2016 às 16:21
0

O componente dropdown do bootstrap tem eventos para manipular todas as interações.

show.bs.dropdown->This event fires immediately when the show instance method is called.

shown.bs.dropdown->This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).

hide.bs.dropdown->This event is fired immediately when the hide instance method has been called.

hidden.bs.dropdown->This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).

Fonte.:http://getbootstrap.com/javascript/#dropdowns

Pode usar este codigo.:

$('.dropdown.keep-open').on({
"shown.bs.dropdown": function() { this.closable = false; },
"click":             function() { this.closable = true; },
"hide.bs.dropdown":  function() { return this.closable; }

});

Fonte.:https://stackoverflow.com/questions/19740121/keep-bootstrap-dropdown-open-when-clicked-off

Entretanto ao fazer testes verifiquei que se abrirmos um segundo menu o 1º fica aberto. Se não for o objetivo pode colocar este codigo.:

 $('.dropdown').on({
    "show.bs.dropdown": function() {
       $('.dropdown.open').removeClass('open');
    },
    "shown.bs.dropdown": function() {
       this.closable = false;
    },
    "click":function() {
       this.closable = true;
    },
    "hide.bs.dropdown": function() {
        return this.closable;
    }
});

Exemplo.:
http://jsfiddle.net/q6jGr/180/

2
  • Tiago: tens duas respostas. São abordagens diferentes ou são a mesma resposta?
    – Sergio
    Commented 13/04/2016 às 18:46
  • @Sergio São respostas diferentes. A 1ª foi uma abordagem totalmente diferente onde foi de encontro a questão mas piscava e foi necessário verificar outra opção. Pensei em editar e mudar completamente a resposta mas a outra não está incorreta portanto achei positivo em ter 2 respostas diferentes. Commented 13/04/2016 às 21:12
0

Remova o data-toggle dos seus botoes de menu e faça o codigo de exibição deles sem afetar o comportamento do boostrap.

Utilizei a estrtuura do seu html para no click dos botoes, encontrar o menu interno e exibi-lo ou nao se estiver clicado.

Basta colocar esse script:

$(document).ready(function(){

    $('.nav-pills .dropdown a').on('click',function(){

        var jqMenu = $(this).closest('.dropdown').find('.dropdown-menu');

        if (jqMenu.length > 0)
        {
            if (jqMenu.is(':visible')) {
                jqMenu.hide();
            }
            else {
                jqMenu.show();
            }
        } 
    })
})

Link para a solução - CODEPEN

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .