JQuery click menu

Question

I am working on this menu:

HTML:

<ul id="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul><!-- end #menu --> <ul class="submenu submenu-1"> <li><a href="#">Item 1.1</a></li> <li><a href="#">Item 1.2</a></li> <li><a href="#">Item 1.3</a></li> <li><a href="#">Item 1.4</a></li> </ul><!-- end #submenu.submenu-item1 --> <ul class="submenu submenu-2"> <li><a href="#">Item 1.1</a></li> <li><a href="#">Item 1.2</a></li> <li><a href="#">Item 1.3</a></li> <li><a href="#">Item 1.4</a></li> </ul><!-- end #submenu.submenu-item1 --> <div class="hero hero-1">content</div> <div class="hero hero-2">content</div> <div class="hero hero-3">content</div> <div class="hero hero-4">content</div> 

JQuery

 $('#menu li a').click(function () { $('#menu li').removeClass('active'); $('.submenu, .hero').slideDown('normal'); }); $('.submenu, .hero').hide(); 

... Currently, it displays ALL submenus and divs of the hero. I want ... if his FIRST li is in #menu, he should look for submenu-1 and hero-1 and slidedown.

I would really appreciate any help.

Thanks!

Answer 1

Add a data attribute to source elements a . ( working example - since css was not provided, the styles are not entirely correct, but you get the idea).

 <ul id="menu"> <li><a href="#" data-slide="1">Item 1</a></li> <li><a href="#" data-slide="2">Item 2</a></li> <li><a href="#" data-slide="3">Item 3</a></li> <li><a href="#" data-slide="4">Item 4</a></li> </ul><!-- end #menu --> 

Then your JS can extract this identifier to show the correct submenus and contents associated with it.

 $('#menu li a').click(function () { //Fetch the value of the 'slide' data attribute of the clicked link var id = $(this).data('slide'); $('.submenu, .hero').hide(); $('#menu li').removeClass('active'); $('.submenu-'+id+', .hero-'+id).slideDown('normal'); }); $('.submenu, .hero').hide(); 

The advantage of using this method over some of the other mentioned methods (for example, .eq() or .index() ) is that you can reorder the order of the original menu items and not discard which content item gets pulled. So this HTML code will work fine ...

 <ul id="menu"> <li><a href="#" data-slide="3">Item 3</a></li> <li><a href="#" data-slide="1">Item 1</a></li> <li><a href="#" data-slide="4">Item 4</a></li> <li><a href="#" data-slide="2">Item 2</a></li> </ul><!-- end #menu --> 

Answer 2

You can use jQuery .index() and .eq() , as in this script: http://jsfiddle.net/bUjud/1/
See: http://api.jquery.com/eq/ and http://api.jquery.com/index/

Answer 3

Demo

For this:

 <ul id="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul><!-- end #menu --> <ul class="submenu submenu-1"> <li><a href="#">Item 1.1</a></li> <li><a href="#">Item 1.2</a></li> <li><a href="#">Item 1.3</a></li> <li><a href="#">Item 1.4</a></li> </ul><!-- end #submenu.submenu-item1 --> <ul class="submenu submenu-2"> <li><a href="#">Item 2.1</a></li> <li><a href="#">Item 2.2</a></li> <li><a href="#">Item 2.3</a></li> <li><a href="#">Item 2.4</a></li> </ul><!-- end #submenu.submenu-item1 --> <div class="hero hero-1">content 1</div> <div class="hero hero-2">content 2</div> <div class="hero hero-3">content 3</div> <div class="hero hero-4">content 4</div> 

Use this jQuery:

 $('#menu li a').click(function () { var index = $('#menu li a').index(this) + 1; $('.submenu, .hero').hide(); $('#menu li').removeClass('active'); $('.submenu-' + index + ', .hero-' + index).slideDown('normal'); }); $('.submenu, .hero').hide(); 

And check jQuery.index()