JQuery dropdown menu three levels

Question

I have menu with three levels:

HTML:

<ul class="main-menu">
    <li><a href="#">About</a></li>
    <li>
        <a href="#">Blog</a>
        <ul class="level2">
            <li>
                <a href="#">item1</a>
                <ul class="level3">
                    <li><a href="#">item 3</a></li>
                    <li><a href="#">item 4</a></li>
                </ul>
            </li>
            <li><a href="#">item2</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

CSS:

.main-menu li a {
    color: #000;
}
.level3,
.level2 {
    display: none;
}
.main-menu li.active .level2 {
    display: block;
}

.level2 li.active .level3 {
    display: block;
}

Script:

$('.main-menu > li').click(function () {
    $(this).toggleClass('active');
});

$('.level2 > li').click(function () {
    $(this).toggleClass('active');
});

The problem is that when I click on an element of the second level, then the list of the third does not open. How to fix it? And how to refactor the code not to be repeated?

DEMO

rrk · Accepted Answer · 2015-09-19 17:31:03Z

4

Use event.stopPropagation() tp prevent bubling of events from child to parent elements.

DEMO

$('.main-menu > li').click(function () {
    $(this).toggleClass('active');
    $('.level2 > li').removeClass('active');
});

$('.level2 > li').click(function (event) {
    $(this).toggleClass('active');
    event.stopPropagation();
});

edited Sep 19, 2015 at 17:31

answered Sep 19, 2015 at 17:05

rrk

15.9k4 gold badges32 silver badges49 bronze badges

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

1 Comment

Ihor Tkachuk Over a year ago

When I click on the items in the main menu, then all of them added class active! How fix?

Collectives™ on Stack Overflow

JQuery dropdown menu three levels

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related