jQuery click menu

Question

I'm 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();

... it currently shows ALL submenus and hero divs. What I want is.. if its FIRST li of the #menu, it should look for submenu-1 and hero-1 and slidedown.

I'd really appreciate any help.

Thanks!

Solution 1

Add a data attribute to the original a items. (working sample - since no css was provided, the styles are not exactly right, 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 that ID in order to show the correct, associated sub menus and content.

$('#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 benefit to using this method over some of the other methods mentioned (like .eq() or .index()) is that you can re-arrange the order of the original menu items and it will not throw off which content item gets pulled. So this HTML would still work perfectly...

<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 -->

Solution 2

You could use jQuery's .index() and .eq() like in this fiddle: http://jsfiddle.net/bUjud/1/
See: http://api.jquery.com/eq/ and http://api.jquery.com/index/

Solution 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 out jQuery.index()

Comments

[m90]

Shouldn't this be data-slide then?

[Dutchie432]

You could use data-slide and then the $(this).data('slide') - it would give a slight performance increase, but for 4 (or even 20) items, we're really not talking much of a difference. Updated answer to reflect that, though. Also, I find it easier to use a custom attribute for re-finding the item later on if needed like $(a[slide="2"]) - I've mixed experiences using that method with the data attributes.

[Dutchie432]

Using a custom attribute is most certainly "valid code". Now, if you're talking about HTML script that will validate, that is another story - but again - no harm, no foul as far as I'm concerned. Anyway, I've changed it to use data attributes.

[Dutchie432]

Using this method prevents you from re-ordering the links if such an action should be needed in the future. Not saying this is a bad idea, but it is something to consider. I know my boss re-arranges things like that all the time based on the time of year, or popular items available.