Outra pergunta do jQuery noob sobre funções

Question

Quero "funcionalizar" mais do meu código jQuery, em vez de escrever pequenos trechos independentes. Aqui está um exemplo. Digamos que eu tenha alguns LI que gostaria de usar como gatilhos, assim:

<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 algumas coisas que eu gostaria de me esconder e mostrar em correspondência para cliques nesses gatilhos, como assim:

<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 eu quisesse escrever um pequeno trecho para cada caso, eu poderia fazer:

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

Mas isso significa escrever tantos trechos quanto conjuntos de links e submenus. Como posso escrever isso em uma função? Não estou querendo "comer por um dia", então a explicação que você acha que está à vontade seria muito apreciada. Muito obrigado!

Answer 1

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

Answer 2

Você já pensou em usar Guias da interface do usuário do jQuery por esta? Parece quase exatamente como o que você quer. Você pode apenas estilizar as guias de maneira diferente do padrão!

Answer 3

Primeiro, os IDs devem ser únicos na sua página. Você só precisa usar o seletor $('#a-init') para acessar.

Eu escrevia assim (para cada item):

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 então escreva o jQuery como:

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

A idéia básica seria usar o método $ (este) para acessar o item que foi clicado e selecionar o elemento de menu em relação ao elemento pai.

Answer 4

Usei uma combinação de Artem Barger e o código de John Sheehan. Obrigado a todos pela sua ajuda; Agora eu posso dormir!