CODEWITHSUNDEEP
jqueryhtmlcss
Krishna Kumar Yadav
Krishna Kumar Yadav

Reputation: 323

How to apply CSS class on current element using jQuery

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.

Upvotes: 1

Views: 525

Answers (4)

EaziLuizi
EaziLuizi

Reputation: 1615

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');
        });
    });

Upvotes: 3

Konrud
Konrud

Reputation: 1114

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.

Upvotes: 3

n1nsa1d00
n1nsa1d00

Reputation: 876

Try with this:

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

Upvotes: 0

Parangan
Parangan

Reputation: 148

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');
        });
    });

Upvotes: 0

Related Questions