jquery toggleClass只是儿童元素

Question

我有一个问题toggleclass只是儿童元素。

<ul class="sample-menu"> 
<li id="sample-topmenu_2"> 
    <a href="#" class="sample-icon">Menu Text</a> 
    <ul class="sample-submenu"> 
     <li class="submenu"><a href="#" class="sample-icon">Submenu Text</a></li> 
     <li class="submenu"><a href="#" class="sample-icon">Submenu Text</a></li> 
    </ul> 
</li> 
<li id="sample-topmenu_3"> 
    <a href="#" class="sample-icon">Menu Text2</a> 
    <ul class="sample-submenu"> 
     <li class="submenu"><a href="#" class="sample-icon">Submenu Text2</a></li> 
     <li class="submenu"><a href="#" class="sample-icon">Submenu Text2</a></li> 
    </ul> 
</li> 

我使用这个jQuery切换，但它拨动了所有菜单中的所有li元素。

$("*[id^=bga-topmenu_] p").click(function() { 
    $("li.submenu").toggleClass("sumenu_show"); 
}); 

我感谢您的帮助。

Answer 1

尝试：

$("*[id^=bga-topmenu_]").click(function() { 
    $(this).find("li.submenu").toggleClass("sumenu_show"); 
}); 

您可以使用$(this)来获取当前上下文（即点击的元素），然后找到所有<li>元素与范围内的子菜单class，使用.find()方法。