Еще один вопрос jQuery noob о функциях

Question

Я хочу «функционализировать» больше моего кода jQuery, вместо того, чтобы писать небольшие отдельные фрагменты. Вот пример. Скажем, у меня есть некоторые Ли, что я хотел бы использовать в качестве триггеров, например, так:

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

И некоторые вещи, я хотел бы скрыть и показать в соответствии с кликами на этих триггеров, например, так:

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

Если бы я хотел написать небольшой фрагмент кода для каждого случая, я мог бы сделать:

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

Но это означает, что писать, как многие фрагменты, как есть наборы ссылок и подменю. Как я могу записать это в функцию? Я не хочу «есть в течение дня», так что большое объяснение, которое вы чувствуете, чтобы писать, было бы очень оценено. Огромное спасибо!

Answer 1

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

Answer 2

Рассматривали ли вы использование jQuery UI Tabs? Это звучит примерно так, как вы хотите. Вы можете просто пометить вкладки иначе, чем по умолчанию!

Answer 3

Прежде всего, идентификаторы должны быть уникальными на вашей странице. Для этого вам нужно использовать селектор $('#a-init').

Я хотел бы написать, что вот так (для каждого элемента):

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> 

А затем написать JQuery как:

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

Основная идея будет использовать метод $ (this) для доступа к элементу, который был нажат, и выберите элемент меню относительно родительского элемента.

Answer 4

Я использовал комбинацию кода Артема Барджера и Джона Шихана. Спасибо всем за вашу помощь; теперь я спать!