Select 由多個元素與 jQuery 共享的 class 元素

Question

我想 select 使用 class 'submenu-expand' 的元素，並添加另一個 class 到它。

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

此代碼有效，但問題是多個元素共享該 class，因此 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>