How to apply CSS class on current element using jQuery

Question

I am trying to a create multi-level menu. When I click the menu, only the current sub menu should be opened... but in my case all sub menus are opened.

My jQuery Code:

$(document).ready(function () {
    $('.showHide').click(function() {
        $('ul.show li').slideToggle('slow');
    });
});

This is my fiddle url http://fiddle.jshell.net/krishnalucky/5e7oq7po/1/

In my menu when i click "CLOTHING" only the clothing sub-menu should open.

you can use http://api.jquery.com/closest/ or http://api.jquery.com/next/ like $(this).next() or change your selector to match only the first element. — nada
– nada, Commented Mar 26, 2015 at 11:05
Your HTML is invalid. You have ULs as immediate children of ULs — iCollect.it Ltd
– iCollect.it Ltd, Commented Mar 26, 2015 at 11:07

EaziLuizi · Accepted Answer · 2015-03-26 11:44:40Z

3

If you don't want to change your HTML or CSS, change your JQuery to this:

 $(document).ready(function () {
    $('.showHide').click(function() {
        $(this).next().find('li').slideToggle('slow');
    });
});

EDIT:

Here is a basic version with valid HTML you should use this and build on from here, or else you could encounter unexpected behavior.

HTML:

    <nav id="navMenu">
    <ul id="menu">
        <li>
            <ul>
                <li class="showHide">
                    <h1><a href="#">Clothing</a></h1>
                </li>
                <li>
                    <ul class="show">
                        <li><a href="#">Casual & Party Wear Shirts </a></li>
                        <li><a href="#">Jeans</a></li>
                        <li><a href="#">Formal Shirts</a></li>
                        <li><a href="#">Trousers & Chinos</a></li>
                        <li><a href="#">T shirts & Polo's</a></li>
                        <li><a href="#">Cargo, Shorts & 3/4ths</a></li>
                        <li><a href="#">Ethinic wear</a></li>
                    </ul>
                </li>
                <li class="showHide">
                    <h1><a href="#">Foot Wear</a></h1>
                </li>
                <li>
                    <ul class="show">
                        <li><a href="#">Sport Shoes</a></li>
                        <li><a href="#">Casual Shoes</a></li>
                        <li><a href="#">Formal Shoes</a></li>
                        <li><a href="#">Sandals and Floaters</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

CSS:

        nav {
        display: block;
        position: relative;
        width: 100%;
        height: auto;
        margin: 0 auto;
        background: #fff;
        color: #000;
    }

        nav ul#menu {
            display: block;
            margin: 0;
            padding: 0;
            list-style: none;
        }

            nav ul#menu li {
                display: block;
            }

    .show {
        display: none;
    }

JS:

    $(document).ready(function () {
        $('.showHide').click(function () {
            $(this).next().find('.show').slideToggle('slow');
        });
    });

edited Mar 26, 2015 at 11:44

answered Mar 26, 2015 at 11:09

EaziLuizi

1,6151 gold badge18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

iCollect.it Ltd Over a year ago

The HTML in the question is invalid so this will not work properly. Best fix that too :)

EaziLuizi Over a year ago

@TrueBlueAussie I have added a revised 'simple' version, outputs same functionality, thanks! (more effort than I would have liked to put in, but isn't it almost always the case... : ) )

iCollect.it Ltd Over a year ago

Okay, that effort deserves an upvote. I live in the UK now, so not following the cricket :)

Konrud · Accepted Answer · 2015-03-26 11:17:05Z

3

You can try something like this :

$(document).ready(function () {
    $('.showHide').click(function() {
      $(this).find(" + ul.show li").slideToggle("slow");
    });
});

But it will be better if you'll change you markup as was suggested here .

Good Luck.

answered Mar 26, 2015 at 11:17

Konrud

1,1249 silver badges19 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

Nice use of the next-adjacent selector.

Parangan · Accepted Answer · 2015-03-26 11:10:38Z

0

Use Different class to your last menu like

<nav id="navMenu">
<ul id="menu">
<li><a href="#">Men</a>
    <ul>
        <h1 class="showHide"><a href="#">Clothing</a>
        </h1>
        <ul class="show">
            <li><a href="#">Casual & Party Wear Shirts </a></li>
            <li><a href="#">Jeans</a></li>
            <li><a href="#">Formal Shirts</a></li>
            <li><a href="#">Trousers & Chinos</a></li>
            <li><a href="#">T shirts & Polo's</a></li>
            <li><a href="#">Cargo, Shorts & 3/4ths</a></li>
            <li><a href="#">Ethinic wear</a></li>
        </ul>
    </ul>
    <ul>
        <h1 class="showHide1"><a href="#">Foot Wear</a></h1>
        <ul class="show1">
            <li><a href="#">Sport Shoes</a></li>
            <li><a href="#">Casual Shoes</a></li>
            <li><a href="#">Formal Shoes</a></li>
            <li><a href="#">Sandals and Floaters</a></li>
        </ul>   
    </ul>

</li>
</ul>
</nav>

And your javascript should be

$(document).ready(function () {
        $('.showHide').click(function() {
            $('ul.show li').slideToggle('slow');
        });
        $('.showHide1').click(function() {
            $('ul.show1 li').slideToggle('slow');
        });
    });

answered Mar 26, 2015 at 11:10

Parangan

1482 silver badges15 bronze badges

2 Comments

iCollect.it Ltd Over a year ago

a) the HTML is invalid and b) you should not need to duplicate code!

iCollect.it Ltd Over a year ago

and c) what dodo upvoted this? This is a terrible solution for jQuery when you can simply search relative to the item clicked!

n1nsa1d00 · Accepted Answer · 2015-03-26 11:11:03Z

0

Try with this:

$(document).ready(function () {
    $('.showHide').click(function() {
        $(this).next('ul.show').children().slideToggle('slow');
    });
});

answered Mar 26, 2015 at 11:11

n1nsa1d00

8769 silver badges24 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

The HTML in the question is invalid so this will not work properly. Best fix that too :)

Collectives™ on Stack Overflow

How to apply CSS class on current element using jQuery

4 Answers 4

3 Comments

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related