0

Olá, estou com uma certa dificuldade de generalizar uma função de dropdown, imagino que eu esteja fazendo algo bem errado, procurei sobre em fóruns e não achei a resposta por isso vou abrir esse tópico.

Meu código HTML está assim, há vários botões com as mesmas classes porém eu quero que cada um faça um dropdown somente para o seu respectivo menu:

<a class="sb-dropdown-toggler" href="#" style="border-color: #05204A">
  <i class="fas fa-wrench sb-icon-size"></i><i class="fas fa-caret-down"> 
</i><span>Ferramentas</span>
</a>
<div class="sb-dropdown-menu">
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
</div>

O CSS assim:

.sb-dropdown-menu{
    display: none;
}
.sb-dropdown-menu.dropdown-active{
    display: block;
}

E o JavaScript assim:

$('.sb-dropdown-toggler').each(function () {
    $(this).click(function (e){
      e.preventDefault();
      $(this + ' .sb-dropdown-menu').toggleClass("dropdown-active");
    });
  });

Minha intensão é fazer com que o submenu de cada botão seja ativado somente pelo seu "pai", é possível fazer isso do modo que estou fazendo? Tenho que adicionar ou retirar algo? Tentei de diversas maneiras e não consegui, eu imagino que eu tenha que adicionar um ID para cada um mas não sei como fazer isso, agradeço a ajuda de quem puder

5
  • Qual a relação do link com o dropdown?
    – Sam
    Commented 11/05/2018 às 22:24
  • São irmãos (estão na mesma div, separadas dos outros), é sempre um após o outro....
    – Sam
    Commented 11/05/2018 às 22:25
  • E você tem vários desses blocos em sequência? Geralmente se usa listas para isso. De qualquer maneira, sua função deve funcionar minimamente se você usar $(this).next('.sb-dropdown-menu'), em vez de $(this + ' .sb-dropdown-menu') que está errado.
    – bfavaretto
    Commented 11/05/2018 às 22:45
  • Era exatamente isso @bfavaretto, obrigado! Commented 11/05/2018 às 22:57
  • Legal que resolveu!
    – bfavaretto
    Commented 11/05/2018 às 22:58

1 Resposta 1

1

O JavaScript abaixo deve atender aos eventos sobre o alvo:

$('.sb-dropdown-toggler').click(function (e) {
    e.preventDefault();
    $(this).next().toggleClass("dropdown-active");
});

Não testado, estou no celular. Dá uma olhada: https://www.w3schools.com/jquery/jquery_ref_traversing.asp

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 .