javascript - 通过多个元素与 jQuery 共享的类来选择元素

Question

我想选择一个具有“submenu-expand”类的元素，并向其添加另一个类。

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

这段代码可以工作，但问题是多个元素共享该类，因此 jQuery 选择所有元素。我尝试这样做，因为“.submenu-expand”位于“menu-item”内部:

$('.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>