選択する複数のdiv要素を個別に

Question

私は、このマークアップを持っている：

順不同リストの内容は、「H3」をクリックしたときにドロップダウンしても、ベースのスタイルを作成するようにh3はするクラスを追加することになっている

<h3 id="btn-1">Content Title</h3> 
<ul><li>Some Content</li></ul> 
...stuff here and further down the page... 
<h3 id="btn-2">Content Title 2</h3> 
<ul><li>Some content 22</li></ul> 

開閉状態である。私は、コードを書くためのより効率的な方法を探していました

$("#btn-1, #btn-2").attr('class','inactive'); 
    $("#btn-1").click(function(){ 
    if ($("#btn-1 + ul").is(":hidden")) { 
      $("#btn-1 + ul").slideDown("slow"),$("#btn-1").attr('class','active'); 
       } else { 
      $("#btn-1 + ul").slideUp('slow'),$("#btn-1").attr('class','inactive'); 
     } 
    }); 


    $("#btn-2").click(function(){ 
     if ($("#btn-2 + ul").is(":hidden")) { 
      $("#btn-2 + ul").slideDown("slow"),$("#btn-2").attr('class','active'); 
       } else { 
      $("#btn-2 + ul").slideUp('slow'),$("#btn-2").attr('class','inactive'); 
     } 
    }); 

と私はこの思い付いたが、それは同時にすべてのコンテナにアニメーションを適用します。だから私が望むように私は作業している、これを持っています。

$("h3[id^='btn-']").attr('class','inactive'); 
    $("h3[id^='btn-']").click(function (index){ 
     if ($("h3[id^='btn-'] + ul").is(":hidden")) { 
      $("h3[id^='btn-'] + ul").slideDown("slow"),$("h3[id^='btn-']").attr('class','active'); 
       } else { 
      $("h3[id^='btn-'] + ul").slideUp('slow'),$("h3[id^='btn-']").attr('class','inactive'); 
     } 
    }); 

私の質問は、最初の作業ソリューションでコードを減らすためのより良い方法はありますか？おかげさまで あなたのクリックハンドラ内

Answer 1

その読めるわけではないが、あなたはここでそれが1行である、効率的にするために尋ねた：

//hide content then only slide up other visible things 
$("h3[id^='btn-']").next("ul").hide().end().click(function(){ $("h3[id^='btn-']").next("ul").not( $(this).next("ul").slideDown("slow").end().next("ul")).slideUp("slow"); }); 

そして、もっと読みやすいフォーマット：

//hide content then only slide up other visible things 
$("h3[id^='btn-']").next("ul").hide().end().click(function() { 
    $("h3[id^='btn-']").next("ul").not(
    $(this).next("ul").slideDown("slow").end().next("ul")).slideUp("slow"); 
});​ 

それを試してみてください。http://jsfiddle.net/t4JF4/

Answer 2

、あなたは（これはすべての<h3>秒を取得し、代わりに$("h3[id^='btn-']")を使用しての）要素がクリック取得するthisを使用することができ、その後、その隣に<ul>を取得します。その上でイベントの火を持っている要素を参照するために、コールバック関数の内部http://jsfiddle.net/8cFeF/1/

Answer 3

使用this：

$("h3[id^='btn-']").attr('class','inactive'); 

$("h3[id^='btn-']").click(function (index){ 
    if ($(this).next('ul').is(":hidden")) { 
     $(this).next('ul').slideDown("slow"); 
     $(this).attr('class','active'); 
    } 
    else { 
     $(this).next('ul').slideUp('slow'); 
     $(this).attr('class','inactive'); 
    } 
}); 

DEMO

$("h3[id^='btn-']").attr('class','inactive').click(function (index){ 
    $(this).toggleClass('inactive active').next().slideToggle("slow"); 
}); 

あなたはこれもあなたのコードを簡素化していることがわかりますさらにトグル機能を使用することによって：

• .toggleClass()：http://api.jquery.com/toggleClass
• .slideToggle()：ここhttp://api.jquery.com/slideToggle

デモです：http://jsfiddle.net/jasper/a692n/3/

更新

あなたが作品を使用しているが、それはルックアップするためにすべての要素をDOMに持っているザ・正規表現セレクタその要素に指定された属性があるかどうか、その属性値が一致するかどうかを調べます。私は（要素を選択するための高速な方法である）は、クラスによって選択するときにjQueryは、それが利用可能ですgetElementByClassを使用しているため<h3>要素にクラスを追加することをお勧めします：

HTML -

<h3 class="h3-title" id="btn-1">Content Title</h3> 
<ul><li>Some Content</li></ul> 
...stuff here and further down the page... 
<h3 class="h3-title" id="btn-2">Content Title 2</h3> 
<ul><li>Some content 22</li></ul> 

JS -

$(".h3-title").attr('class','inactive').click(function (index){ 
    $(this).toggleClass('inactive active').next().slideToggle("slow"); 
});