1

Tenho a Seguinte div:

<div class="sub-menu">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
</div>

tenho uma função em jQuery que mostra e esconde esse menu quando clico na div botão, tenho duas condições para esconder esse sub menu, ou clicando na div botão ou clicando na própria div sub-menu usando essa função:

  $(".sub-menu").click(function(){
    if(status == 1){
        $('.sub-menu').animate({
            left: '-224px',                     
        }, 300);    
        $('.fade').fadeOut();
        status = 0;
        $('.hamburg').removeClass('open');            
    }    
  });

a variável status verifica se o sub-menu esta aberto ou fechado, o problema é que quando clico nas li's dentro do sub-menu ele ignora os link e apenas fecha a div sub-menu, como fazer ele readicionar normalmente para as supostas paginas ao clicar nos links?

1 Resposta 1

3

Quando usas $(".sub-menu").click(function(){ essa função anónima (callback) vai ser chamada quando um elemento com a classe sub-menu receber um evento. O que é interessante e útil aqui é que essa callback disponibiliza um argumento, o evento em sí e corre com o contexto apontado ao elemento. Ou seja, o this dentro dessa função é o proprio elemento cujo .click( foi aplicado.

O objeto evento que é passado à callback tem uma propriedade importante que é o .target, ou seja o elemento onde o click se deu. Ora isso é a resposta à tua dúvida:

Quando o this e o e.target forem o mesmo o click deu-se no .sub-menu e não num descendente. Podes testar isso aqui (vê a consola): https://jsfiddle.net/pLgL82pk/

Assim no código podes ter:

$(".sub-menu").click(function(e){
    if (e.target == this){
        // o click deu-se no sub-menu
    } else {
        // o click deu-se num descendente
    }
    // etc...
1
  • funcionou perfeitamente meu caro, não tinha conhecimento disso, muito obrigado! Commented 1/06/2016 às 22:33

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 .