jQuery menu del tasto

Question

Sto lavorando a questo 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(); 

... è attualmente mostra tutti i sottomenu e eroe div. Quello che voglio è .. se è il primo dei #menu, dovrebbe cercare submenu-1 e hero-1 e slidedown.

Mi piacerebbe davvero apprezzare alcun aiuto.

Grazie!

Answer 1

Aggiungi un attributo di dati ai a elementi originali. (working sample - poiché non è stato fornito alcun css, gli stili non sono esattamente corretti, ma si ottiene l'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 --> 

Quindi il JS può estrarre quell'ID per visualizzare i sottomenu e il contenuto corretti, associati.

$('#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(); 

Il vantaggio di utilizzare questo metodo nel corso alcuni degli altri metodi di cui (come .eq() o .index()) è che si può ri-organizzare l'ordine delle voci di menu originali e non sarà buttare via il quale elemento di contenuto ottiene tirato. Quindi questo HTML sarebbe ancora funzionare perfettamente ...

<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

Si potrebbe utilizzare di jQuery .index() e .eq() come in questo violino: http://jsfiddle.net/bUjud/1/
See: http://api.jquery.com/eq/ e http://api.jquery.com/index/

Answer 3

DEMO

Per questo:

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

Utilizzare questa 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(); 

E verificare jQuery.index()