Generalize a Javascript dropdown function?

Navigation
0

Hello, I'm having a hard time generalizing a dropdown function, I guess I'm doing something wrong, I searched on forums and did not find the answer so I'll open that topic.

My HTML code is like this, there are several buttons with the same classes but I want each one to do a dropdown only for its respective 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>

CSS like this: 

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

And JavaScript like this: 

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

My intention is to make the submenu of each button activated only by your "parent", can you do it the way I'm doing? Do I have to add or remove something? I tried in several ways and I could not, I imagine that I have to add an ID for each one but I do not know how to do it, I appreciate the help of whoever I can

    
asked by anonymous 12.05.2018 / 00:04

1 answer

1

The following JavaScript must meet the events about the target: 

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

Not tested, I'm on the phone. Take a look: link

    
12.05.2018 / 00:55
VisualG - Exercise with procedure How to remove the Node in Arch linux / Linux Manjaro