jQuery click menu

Question

Je travaille sur ce 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();

... il affiche actuellement TOUS les sous-menus et les divs héros. Ce que je veux c'est... si c'est le PREMIER li du #menu, il devrait chercher le submenu-1 et le hero-1 et slidedown.

J'apprécierais vraiment toute aide.

Gracias.

Answer 1

Ajouter un attribut de données à l'original a articles. ( échantillon de travail - comme aucun css n'a été fourni, les styles ne sont pas exactement corrects, mais vous comprenez l'idée).

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

Ensuite, votre JS peut extraire cet ID afin d'afficher les sous-menus et le contenu appropriés et associés.

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

L'avantage d'utiliser cette méthode par rapport à d'autres méthodes mentionnées (par exemple .eq() o .index() ) est que vous pouvez réorganiser l'ordre des éléments du menu d'origine et que cela n'affectera pas l'élément de contenu qui sera tiré. Ainsi, ce HTML fonctionnerait toujours parfaitement...

<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

DEMO

Pour ça :

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

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

Et regardez jQuery.index()

Answer 3

Vous pouvez utiliser l'outil de jQuery .index() y .eq() comme dans ce violon : http://jsfiddle.net/bUjud/1/
Voir : http://api.jquery.com/eq/ y http://api.jquery.com/index/