jQuery menú del botón

Question

estoy trabajando en este menú:

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

... que actualmente muestra todos los submenús y divs héroe Lo que quiero es ... si es PRIMERO li del #menú, debería buscar el submenú-1 y el héroe-1 y el deslizamiento.

Realmente agradecería cualquier ayuda.

Gracias!

Answer 1

Añadir un atributo de datos de los originales a artículos. (working sample - dado que no se proporcionó css, los estilos no son exactamente correctos, pero se entiende la 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 --> 

A continuación, sus JS pueden extraer de identidad con el fin de mostrar los submenús asociados, correctas y contenidos.

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

La ventaja de utilizar este método sobre algunos de los otros métodos mencionados (como .eq() o .index()) es que se puede volver a organizar el orden de los elementos de menú originales y no va a deshacerse de qué elemento de contenido se tirado. Así que este código HTML todavía funcionan perfectamente ...

<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

Se puede usar jQuery .index() y .eq() como en este violín: http://jsfiddle.net/bUjud/1/
Ver: http://api.jquery.com/eq/ y http://api.jquery.com/index/

Answer 3

DEMO

Por esta:

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

Utilice esta 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(); 

Y echa un vistazo jQuery.index()