CODEWITHSUNDEEP
javascriptjqueryhtml
Ihor Tkachuk
Ihor Tkachuk

Reputation: 1118

How to make dropdown menu with 3 levels?

I have a simple menu, and I want to do that when you click on the menu items to open a nested list. If you double-click then it must be opened and closed.

Html:

<ul class="menu">
    <li class="has-child">Click here
        <ul>
            <li class="has-child">Click here
                <ul>
                    <li>Level 3</li>
                </ul>
            </li>
            <li>Level 2</li>
            <li>Level 2</li>
        </ul>
    </li>
    <li>Level 1</li>
    <li>Level 1</li>
</ul>

jQuery:

$('li.has-child').on('click', function () {
    var elem = $(this).children('ul');

    if (elem.is(':hidden')) {
        elem.slideDown(500);
    } else {
        elem.slideUp(500);
    }
});

But when I click on a menu item in the second level, then the first is closed. Why is this happening and how to fix it?

[JSFiddle]

Upvotes: 2

Views: 119

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

You need to stop the event from propagating from the parent to the child or vice-versa. You can use event.stopPropagation():

$('li.has-child').on('click', function (event) {
    event.stopPropagation()
    var elem = $(this).children('ul');
    if (elem.is(':hidden')) {
        elem.slideDown(500);
    } else {
        elem.slideUp(500);
    }
});

Upvotes: 2

BenG
BenG

Reputation: 15154

you need to use stopPropagation

$(document).ready(function () {
    $('li.has-child').on('click', function (event) {

        event.stopPropagation();

        var elem = $(this).children('ul');
        if (elem.is(':hidden')) {
            elem.slideDown(500);
        } else {
            elem.slideUp(500);
        }
    });
});

This then stops the click bubbling up to the parent li

Fiddle

Upvotes: 2

Related Questions