通过多个元素与jQuery共享的类选择一个元素

Question

我想选择一个类为"submenu-expand"的元素，并向其添加另一个类。

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

这段代码有效，但问题是多个元素共享该类，所以jQuery会选择所有元素。我试着这样做，因为".subenu-expanded"在"菜单项"内：

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