2

Estou implementando uma função em meu menu onde o mesmo fechara o conteúdo do dropdown que estiver aberto SE o clique for em qualquer outro lugar exceto no menu em si.

$(document).click(function(event) {
   var $menuOpened = $('.dropdown-content');
   $.each($menuOpened, function(index, value) {
      if ($(value).hasClass('show') && event.target != $(value)) {
         // Fecha o menu
      }
   });
 });

Só que sempre true quando clico em qualquer outro lugar, até mesmo no botão responsavel por abrir o dropdown em questão, logo, ele nunca é exibido para poder ser fechado.

Possuo mais de 1 dropdown que pode ser aberto no mesmo menu.

1
  • Devo ter precebido mal, já retirei a resposta
    – Miguel
    Commented 25/01/2017 às 19:33

2 Respostas 2

2

Você pode verificar se o target é o seu botão e ignorar a ação seguinte:

$(document).click(function(event) {

   if ($(event.target).attr('class').indexOf('classe_botoes') > -1) return; // verifica se o alvo esta sendo o botão

   var $menuOpened = $('.dropdown-content');
   $.each($menuOpened, function(index, value) {
      if ($(value).hasClass('show') && event.target != $(value)) {
         // Fecha o menu
      }
   });
 });

indexOf é uma função javascript que verifica se contém um certo valor em um array, se ele encontrar ele retorna o índice, se não encontrar é retornado -1. Visto que string é array de chars em javascript, o if verifica se dentre as classes do elemento na tela que foi clicado existe alguma com classe_botoes, por esse motivo a verificação é se for > -1 que é encontrado.

4
  • os elementos não possuem id.
    – RFL
    Commented 25/01/2017 às 19:27
  • De alguma forma você terá que identificar àquele botão, se puder colocá-lo um id além de ser a forma mais correta é a mais fácil. Mas pode usar outro seletor, como class por exemplo.
    – BrTkCa
    Commented 25/01/2017 às 19:35
  • Tenho mais de 1 menu que pode ser aberto, por isso o motivo do loop e do não uso de ID
    – RFL
    Commented 25/01/2017 às 19:41
  • funcionou! você pode explicar um pouco mais o primeiro if ?
    – RFL
    Commented 26/01/2017 às 12:43
1

Pode fazer essa validação através do target do evento.

$(document).click(function(event) {
   if (event.target.id == 'btnAbrirMenu' || event.target.id == 'div_do_menu')
      alert("clicou no menu ou no botão de abrir o menu");
   else
      alert("clicou fora do menu");
 });

No fim das contas fica algo como:

$(document).click(function(event) {
   if (event.target.id == 'btnAbrirMenu' || event.target.id == 'div_do_menu')
      return;
   else { 
      //fechar menu;
   }
 });

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 .