Une autre question noob jQuery sur les fonctions

Question

Je veux « fonctionnaliser » plus de mon code jQuery, au lieu d'écrire des petits extraits autonomes. Voici un exemple. Disons que j'ai quelques li est que je voudrais utiliser comme des déclencheurs, comme ceci:

<li class="alpha-init" id="a-init">A</li>
<li class="alpha-init" id="b-init">B</li>
<li class="alpha-init" id="c-init">C</li>

Et quelques trucs que je voudrais cacher et de montrer en correspondance avec les clics sur ces déclencheurs, comme ceci:

<ul id="a-sub" class="alpha-popdown">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ul id="b-sub" class="alpha-popdown">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>


<ul id="c-sub" class="alpha-popdown">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Si je voulais écrire un petit extrait pour chaque cas, je pouvais faire:

$('li.alpha-init #a-init').click(function(){
    $('ul#a-sub').slideToggle(200);
}

Mais cela signifie écrire autant extraits comme il y a des ensembles de liens et sous-menus. Comment puis-je écrire cela en fonction? Je ne cherche pas à « manger pour un jour », donc des explications autant que vous vous sentez à l'écriture serait très apprécié. Merci beaucoup!

Answer 1

$('li.alpha-init').click(function(){
    $('ul#'+this.id.substr(1) + "-sub").slideToggle(200);
}

Answer 2

Avez-vous envisagé d'utiliser jQuery UI onglets pour cela? Il semble presque exactement comme ce que vous voulez. Vous pouvez simplement le style des onglets différemment la valeur par défaut!

Answer 3

Tout d'abord, id doit être unique sur votre page. Il vous suffit d'utiliser le sélecteur $('#a-init') pour y accéder.

Je voudrais écrire que, comme si (pour chaque élément):

html:

<li class="alpha-init" id="a-init">
<div>A</div>
<ul id="a-sub" class="alpha-popdown">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
</li>

Et puis écrire le jquery comme:

$('li.alpha-init').click(function(){
    $(this).children('ul.alpha-popdown').slideToggle(200);
}

L'idée de base serait d'utiliser la méthode $ (this) pour accéder à l'élément qui a été cliqué et sélectionnez votre élément le menu par rapport à l'élément parent.

Answer 4

J'ai utilisé une combinaison de Artem Barger et le code de John Sheehan. Merci à tous pour votre aide; maintenant je peux dormir!