0

Preciso desenvolver um menu acordeon e estou tendo problemas com o evento de clique. Meu script:

$(document).ready(function(){
    $('.dropdown').click(
        function(){
            $(this).find("ul").slideToggle();
            return false;
        }
    );
});

O SlideToggle chama uma lista não ordenada que fica dentro de um elemento LI. Funciona perfeitamente, mas os links da lista param de redirecionar. Quando clico em algum deles, o slideToggle() simplesmente se desfaz, o menu retorna ao estado original e não sou redirecionado. Onde estou errando?

5
  • Poderia incluir um demo da estrutura do menu? Acredito que possa ser problema com relação a propagação do evento de click.
    – Wakim
    Commented 8/06/2014 às 1:01
  • Insira isso como parte do HTML da sua pergunta Commented 8/06/2014 às 1:07
  • @PedroVinícius, poderia incluir também o elemento com classe dropdown? Acho que ajuda a descobrir o problema :)
    – Wakim
    Commented 8/06/2014 às 1:07
  • @Wakim, o código do menu é gerado automaticamente pelo WP. Mas se você puder dar uma olhada no código-fonte no site, segue o link: conscienciaestelar.filosofiaesoterica.com.br É o menu da esquerda que está com esse problema :/ Commented 8/06/2014 às 1:23
  • 1
    @PedroVinícius, ok, irei dar uma olhada
    – Wakim
    Commented 8/06/2014 às 1:24

3 Respostas 3

2

O erro ocorre justamente pelo return false;, que não deixa que o evento iniciado no link do submenu termine de executar.

Inclua o seguinte código logo após o registro do handler para o click no dropdown:

$('.sub-menu a').click(function(e) { e.stopPropagation(); });

Ao dar stopPropagation no clique do link, você irá previnir que o evento propague para cima, e ai não bloqueará o evento de navegação.

E ao clicar sobre o link, o usuário será redirecionado para a página.

1

Em existe uma função chamada .preventDefault() que "nega" o evento original de uma tag HTML, desta forma você pode usa-lo para que seus links não tenham seu efeito original assim que forem clicados

$(document).ready(function(){
    $('.dropdown').click(
        function(event){
            event.preventDefault();
            $(this).find("ul").slideToggle();
        }
    );
});
1
  • Obrigado por responder amigo. Mas já tentei com essa função também. O efeito é o mesmo :-/ Commented 8/06/2014 às 1:25
0

Vamos imaginar que seu HTML esteja assim:

<ul>
    <li class="dropdown">
        <a href="">Abrir drop down A</a>
        <ul>
            <li><a href="">Link A 1</a></li>
            <li><a href="">Link A 2</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a href="">Abrir drop down B</a>
        <ul>
            <li><a href="">Link B 1</a></li>
            <li><a href="">Link B 2</a></li>
        </ul>
    </li>
</ul>

E seu script esta aplicando o click ao elemento .dropdown quando o correto é aplicar o clique ao link filho direto do elemento .dropdown.

Então seu jQuery.click deve ficar assim:

$(document).ready(function(){
    $('.dropdown >a').click(function(){
       $(this).siblings("ul").slideToggle();
       return false;
    });
});

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 .