Un'altra domanda jQuery niubbo sulle funzioni

Question

Voglio "funzionalizzare" più del mio codice jQuery, invece di scrivere piccoli frammenti standalone. Ecco un esempio. Diciamo che ho un po 'li è che mi piacerebbe usare come trigger, in questo modo:

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

E alcune cose mi piacerebbe nascondere e mostrare in corrispondenza click su tali trigger, in questo modo:

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

Se avessi voluto scrivere un piccolo frammento per ciascun caso, avrei potuto fare:

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

Ma questo significa che la scrittura come molti frammenti in quanto vi sono insiemi di link e sottomenu. Come faccio a scrivere questo in una funzione? Non sto cercando di "mangiare per un giorno", così come di molte spiegazioni, come si sente fino alla scrittura sarebbe molto apprezzato. Grazie mille!

Answer 1

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

Answer 2

Hai pensato di usare jQuery UI Tabs per questo? Sembra quasi esattamente come quello che vuoi. Si può solo lo stile le schede in modo diverso da quello predefinito!

Answer 3

Prima di tutto, id dovrebbe essere unico sulla tua pagina. Hai solo bisogno di utilizzare il $('#a-init') di selezione per accedervi.

Vorrei scrivere che in questo modo (per ciascuna voce):

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>

E poi scrivere il jquery come:

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

L'idea di base sarebbe quella di utilizzare il metodo di $ (questo) per accedere alla voce che è stato cliccato e selezionare il proprio elemento di menu relativo al l'elemento principale.

Answer 4

Ho usato una combinazione di Artem Barger e il codice di John Sheehan. Grazie a tutti per il vostro aiuto; ora riesco a dormire!