javascript - jquery toggleClass to just children element - Stack Overflow

admin管理员组

文章数量:1356852

i have an issue to toggleclass for just children element.

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

i use this jquery toggle, but it's toggle all li elements for all menu.

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

I appreciate your help.

i have an issue to toggleclass for just children element.

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

i use this jquery toggle, but it's toggle all li elements for all menu.

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

I appreciate your help.

• javascript
• jquery
• parent-child
• children
• toggleclass

Share Improve this question Follow asked May 1, 2014 at 19:32 Martian.titanMartian.titan 46666 silver badges1919 bronze badges 1

• 2 That it a super weird selector. – Christopher Marshall Commented May 1, 2014 at 19:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Try:

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

You can use $(this) to get the current context (i.e. the clicked element) and then find all <li> elements with the submenu class within that context, using the .find() method.

本文标签： javascriptjquery toggleClass to just children elementStack Overflow