CODEWITHSUNDEEP
javascriptjquery
Goran Jakovljevic
Goran Jakovljevic

Reputation: 2820

Jquery simple menu

I need to create a menu same as this one:

http://www.girard-perregaux.com/collection/univers-en.aspx?type=1

Click on collections then on manufacturer, then again on manufacturer to close. As you can see first it slides down, then after that it just change links without again sliding up and down, untill you click on same open element.

I first tried this:

$('ul.sub-menu').hide();
$('.sf-menu').children('li').click(function(){  
    $(this).children(".sub-menu").slideToggle('slow');
    $('ul.sub-menu').hide();

its working but its sliding up and down every time you click on menu, and not just changing list items. So I figured out I need to somehow target child li elements instead of ul. Also if you click between parrent list items, it needs to switch like on that menu, but if i click again on same open list item, it needs to close(slide up.)

Many thanks for this as I spent half a day trying to figure it out. Also how to target children li, i tried this:

$('.sf-menu').children('li').click(function(){  

$(this).children(".sub-menu li")

but nothing.

Upvotes: 1

Views: 185

Answers (1)

Ricardo Souza
Ricardo Souza

Reputation: 16468

You can try binding a click to the submenus and using e.stopPropagation() and e.stopImediatePropagation(): http://jsfiddle.net/7eCjd/

$menu.find(">li>ul").on("click", function(e) {
    e.stopPropagation();
    e.stopImediatePropagation();
});

This will not allow the submenus to close when you click on them.

Upvotes: 1

Related Questions