Выберите элемент по классу, который совместно используется несколькими элементами jQuery

Question

Я хочу выбрать элемент с классом 'submenu-expand' и добавить к нему другой класс.

$('.menu-item').on('click',function(){
$('.submenu-expand').toggleClass('expanded')
})

Этот код работает, но проблема в том, что несколько элементов совместно используют этот класс, поэтому jQuery выбирает все из них. Я пытался сделать это так, поскольку «.submenu-expand» находится внутри «пункта меню»:

$('.menu-item').on('click',function(){
$('this>.submenu-expand').toggleClass('expanded')
})

HTML:

<li id="menu-item-940" class="menu-item">
<a href="" >אודות</a>
<button class="submenu-expand" tabindex="-1"></button>
</li>

Какой правильный путь сделать это?

Answer 1

Вы имеете в виду

$('.menu-item').on('click', '.submenu-expand', function() {
  $(this).toggleClass('expanded')
})

.expanded {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="menu-item-940" class="menu-item">
    <a href="">אודות</a>
    <button class="submenu-expand" tabindex="-1">Click</button>
  </li>
  <li id="menu-item-940" class="menu-item">
    <a href="">אודות</a>
    <button class="submenu-expand" tabindex="-1">Click</button>
  </li>
  <li id="menu-item-940" class="menu-item">
    <a href="">אודות</a>
    <button class="submenu-expand" tabindex="-1">Click</button>
  </li>
  <li id="menu-item-940" class="menu-item">
    <a href="">אודות</a>
    <button class="submenu-expand" tabindex="-1">Click</button>
  </li>
</ul>