Geek asks and answers

JQuery slideToggle menu that destroys the menu for sisters before opening / closing

Here is a rough model of what I mean: http://jsfiddle.net/dX2ux/1/

The internal CMS created by the client dynamically creates the menu using this HTML structure. It also comes with a jQuery script, which is shown in the sample.

I want to edit the script so that it closes it, opening the open menus, before it opens itself. The class showalso needs to be switched.

So far I have come up with the following: http://jsfiddle.net/dX2ux/2/

But if you play with it, it spins when you press one of the submenus.

Can someone shed some light on how I can achieve the kind of behavior I am striving for? Also, is this the best way to do this? Can I say this?

Any help is appreciated. Thank.

+5
source share
1 answer

Not sure if this is the “best” way as such, but with this markup this solution should work:

$('.toggle-menu').on('click',function(e){
    e.preventDefault();
    $(this).parent().siblings().children('.toggle-menu').removeClass('show').next().slideUp();
    $(this).toggleClass('show').next().slideToggle();
});

Edited your script to show the effect: http://jsfiddle.net/dX2ux/3/

+3
source

More articles:


All Articles