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
$(this).next('.sb-dropdown-menu')
, em vez de$(this + ' .sb-dropdown-menu')
que está errado.