Otra pregunta acerca de las funciones novato jQuery

Question

Quiero "funcionalizar" más de mi código de jQuery, en lugar de escribir pequeños fragmentos independientes. He aquí un ejemplo. Digamos que tengo un poco de li es que me gustaría utilizar como factores desencadenantes, así:

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

Y algunas cosas que me gustaría para ocultar y mostrar en correspondencia a los clics de los factores desencadenantes, así:

<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 quería escribir un pequeño fragmento de código para cada caso, lo que podía hacer:

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

Pero eso significa que escribir tantos fragmentos como hay conjuntos de enlaces y submenús. ¿Cómo puedo escribir esto en una función? No estoy en busca de "comer por un día", por lo tanto la explicación como se sienta a la escritura sería muy apreciada. Gracias mucho!

Answer 1

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

Answer 2

Ha considerado el uso jQuery UI aquí para esto? Suena casi exactamente igual que lo que quiere. Puede simplemente el estilo de las pestañas de manera diferente que el valor por defecto!

Answer 3

En primer lugar, la identificación debe ser único en su página. Sólo tiene que utilizar el selector de $('#a-init') para acceder a él.

Me gustaría escribir que como tal (para cada elemento):

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>

Y a continuación, escribir el jQuery como:

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

La idea básica sería el uso de la (este) $ método para acceder al elemento que se hizo clic y seleccione el elemento de menú correspondiente al elemento padre.

Answer 4

He utilizado una combinación de Artem Barger y el código de John Sheehan. Gracias a todos por su ayuda; Ahora llego a dormir!