機能についてのもう一つの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のタブに使用して考えがありますか？それはほぼ正確に何をしたいのように聞こえます。あなただけのデフォルトとは異なるタブのスタイルを設定することができます！

Answer 3

まず第一に、IDは、ページ上で一意でなければなりません。あなたはそれにアクセスするには、セレクタ$('#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);
}

基本的な考え方は、クリックされた項目にアクセスし、親要素へのあなたのメニュー要素の相対を選択するには$（この）メソッドを使用することです。

Answer 4

私はアルテムバーガー、ジョンシーハンさんのコードの組み合わせを使用していました。あなたの助けのためのみんなありがとう。今私は眠りにつく！