jquery/javascript menu issue

Question

$(function(){
    $("li.level2").hide();
    $("li.level3").hide();

    $("ul.navigation").delegate("li.level1", "click", function() {
        $("li.level2").toggle().siblings("li.level3").hide();;
    });

    $("ul.navigation").delegate("li.level2", "click", function() {
        $("li.level3").toggle();
    });
});

I'm using this script to make a drop down menu for my page in jquery, but currently when you click on a level1 list it opens up every level1, when i just want to open the one that was clicked on. ie. it is doing this when i click on the first 1:

when i want it to do this

I understand you can use the $this function to only open the one selected, but i am unsure how to implement it and whenever i try (this).next it only opens the next one when

I included an active page with styling to make it easier to interpret: http://jsfiddle.net/K6TSv/1045/

thanks for your help in advanced, this has been driving my head on.

Add the word 'this' without the quotes before the selector in the click binding. — alt
– alt, Commented Jun 11, 2012 at 3:43

Shyju · Accepted Answer · 2012-06-11 04:17:04Z

2

get the clicked item using $(this) and then get the next level2 items and show that.

$("ul.navigation").delegate("li.level1", "click", function() {
    var item=$(this);
    item.next(".level2").toggle();      
});

jsfiddle Sample : http://jsfiddle.net/K6TSv/1046/

If i were doing this. I would create a hierarchical HTML markup to handle this which will make things easy

EDIT : As per the comment ( Markup changed!!!)

If you want to select elements based on some selection criteria unitl some element, Use nextUntil function.

$(this).nextUntil(".level1",".level2").toggle();

Sample http://jsfiddle.net/K6TSv/1072/

edited Jun 11, 2012 at 4:17

answered Jun 11, 2012 at 3:44

Shyju

220k106 gold badges420 silver badges498 bronze badges

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

9 Comments

user1448093 Over a year ago

shyju i spoke prematurely haha, um when implementing the .next function its only opening the next menu item even when there are other items in the level ie. only opening one 2 when it should open both jsfiddle.net/K6TSv/1065

user1448093 Over a year ago

so when i click on the 1 i want to show all the level 2s until the next 1

Shyju Over a year ago

That is what the example i gave you does. What problem you face now ?

user1448093 Over a year ago

when you click on the first 1, it only shows one of the level 2s not both of them. jsfiddle.net/K6TSv/1065

Shyju Over a year ago

@user1448093 I see only one level 2 item under the first level 1. What you mean by both ?

|

Collectives™ on Stack Overflow

jquery/javascript menu issue

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related