CODEWITHSUNDEEP
jquerymenuonclick
eozzy
eozzy

Reputation: 68740

jQuery click menu

I'm working on this menu:

enter image description here

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!

Upvotes: 6

Views: 10845

Answers (3)

qwertymk
qwertymk

Reputation: 35304

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

Upvotes: 1

Dutchie432
Dutchie432

Reputation: 29170

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

Upvotes: 2

m90
m90

Reputation: 11822

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/

Upvotes: 1

Related Questions