JQuery navigation tree open/close on click

Question

I'm not JQuery or javascript expert and I have little problem with my website navigation. My navigation looks like typical windows resource management navigation e.g:

Title
    subtitle
    subtitle
        subsubtile
    subtitle
Title
    subtitle

I want it works like same as typical windows resource management navigation, when I click title subtitles will be able to see and when I reclick title it's hide clicked title subtitles.

With the following code I was able to open titles, but don't have any idea how to close them.

$( document ).ready(function() {
    $('#navigation').click(function() {
        $('#navigation ul li:hover').children('#navigation ul li ul').slideDown(400);
    });
})

first you need to have an idea how to close them, there's lot of ways to do it. — Roko C. Buljan
– Roko C. Buljan, Commented May 2, 2013 at 14:50

vinczemarton · Accepted Answer · 2013-05-02 15:27:21Z

3

There is a convenient shorthand in jQuery: .slideToggle()

The selected element will be displayed if it's currently not, and vica-versa.

The other important part is, that you can just use $(this) in the event handler. It is the element which the event is handled on.

Also .children() is a tree traversal function. it means it's results will be selected relative to the selected elements it was called on. So $('#example').children('a') will select all links directly under the example element, so no $('#example').children('#example a') needed.

I have wrapped the code up for you:

$(document).ready(function() {
    $('#navigation ul li').click(function(e) {
        e.stopPropagation();
        $(this).children('ul').slideToggle(400);
    });
});

Or if you prefer to have 1 event handler and bubbling:

$(function() {
    $('#navigation').on('click', 'li', function(e) {
        e.stopPropagation();
        $(this).children('ul').slideToggle(400);
    });
});

Of course these two only work if the <ul> you toggle is the direct child of the <li> you fire the click event on.

EDIT:

As @thebreiflabb mentioned in the comments, because of event bubbling the click event will be fired on every parent of the clicked element by default.

If any of the parents also match the selector, the same event handler will be called on them.

e.stopPropagation() tells, that the event is handled here and it does not need to fire on parent elements.

To see the difference click on "Subitem 2" under "Item 4" in both of these fiddles:

With stopping propagation.

Without stopping propagation.

As you can see, without stopPropagation() "Item 4" also closes.

edited May 2, 2013 at 15:27

answered May 2, 2013 at 14:56

vinczemarton

8,2267 gold badges59 silver badges91 bronze badges

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

2 Comments

thebreiflabb Over a year ago

Yes this works, however there is just one small addition because of sub-sub levels and so on. You need to stop propagation to not close the higher up items. jsfiddle.net/mtCyS

vinczemarton Over a year ago

I have also incorporated your fiddle in my answer.

Collectives™ on Stack Overflow

JQuery navigation tree open/close on click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related