jquery toggleClass只是children元素

Question

我有一个问题toggleclass for just children元素.

<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()