How to target one element with same class?

Question

I have a navbar where I want to click on a toggle button to toggle the children of that element

Html markup:

<ul class="menu">
  <li class="menu-item">
    <div class="sub-menu-container">
      <ul class="sub-menu">
        <li class="sub-menu-item"></li>
        <li class="sub-menu-item"></li>
        <li class="sub-menu-item"></li>
      </ul>
    </div>
    <div class="toggle-sub-menu">
  </li>
  <li class="menu-item">
    <div class="sub-menu-container">
      <ul class="sub-menu">
        <li class="sub-menu-item"></li>
        <li class="sub-menu-item"></li>
        <li class="sub-menu-item"></li>
      </ul>
    </div>
    <div class="toggle-sub-menu">
  </li>
</ul>

I have tried with .closest and .parent etc but nothing is working.

jQuery('.toggle-sub-menu').click(() => {
    jQuery('.toggle-sub-menu').closest('.sub-menu').addClass('open')
})

When I click the toggle, all classes with .sub-menu gets the class .open

Use `click(function() {` then you can use `this` (or use event.target) `$(this).closest(".sub-menu")...` — freedomn-m, Aug 25 '21 at 09:18
Relevant (but not proposing as a duplicate): [arrow functions / functions equivalent](https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-interchangeable/34361380#34361380) — freedomn-m, Aug 25 '21 at 09:25

score 2 · Accepted Answer · answered Aug 25 '21 at 09:21

There are a few problems with your code.

<div class="toggle-sub-menu"> are not closed
sub-menu is not a parent of your toggle-sub-menu so that will not work

try with the following:

jQuery('.toggle-sub-menu').click((obj) => {
  jQuery(obj.target).closest('.menu-item').find('.sub-menu').toggleClass('open')
})

jQuery('.toggle-sub-menu').click((obj) => {
  jQuery(obj.target).closest('.menu-item').find('.sub-menu').toggleClass('open')
})

.sub-menu {
  display: none;
}

.sub-menu.open {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
  <li class="menu-item">
    <div class="sub-menu-container">
      <ul class="sub-menu">
        <li class="sub-menu-item"></li>
        <li class="sub-menu-item"></li>
        <li class="sub-menu-item"></li>
      </ul>
    </div>
    <div class="toggle-sub-menu">toggle</div>
  </li>
  <li class="menu-item">
    <div class="sub-menu-container">
      <ul class="sub-menu">
        <li class="sub-menu-item"></li>
        <li class="sub-menu-item"></li>
        <li class="sub-menu-item"></li>
      </ul>
    </div>
    <div class="toggle-sub-menu">toggle</div>
  </li>
</ul>

How to target one element with same class?

1 Answers1