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

Question

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

<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 для этого?Это звучит почти так же, как то, что вы хотите.Вы можете просто оформить вкладки иначе, чем по умолчанию!

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

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