Jquery - 1ページに複数回トグルするにはどうすればいいですか？

Question

私はJqueryを使い慣れていて、簡単なトグルスクリプトを組み立てることができました。しかし、私は1ページで複数のトグルでは動作しないことに失望しました。

私は潜在的にトグルを最大20個持っています。

1. 各トグルするための新しいクリック 機能を作成することなく、この作品 を作るための方法はありますか？

2. 今すぐ トグルトリガーにカーソルを合わせると、 になりません。どうすればカーソルを にすることができますか？ここで

コードです：

<script src="http://code.jquery.com/jquery-1.5.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#toggle-trigger").click(function() { 
     $("#toggle-wrap").toggle('slow'); 
    }); 
}); 
</script> 

<p><a id="toggle-trigger">Click to toggle</a><p> 
<div id="toggle-wrap"> 
    <div class="style-single"> 
     Random Text 
    </div> 
</div> 


<p><a id="toggle-trigger">Click to toggle 2</a><p> 
<div id="toggle-wrap"> 
    <div class="style-single"> 
     This doesn't work :(
    </div> 
</div> 

Answer 1

イアンの答えの作品を行う、しかし、あなたは、あなたのHTMLマークアップを変更することを避けるためにこれを使用することができます。すべてのids（＃）をクラス（。）に変更する必要があります。

$(document).ready(function() { 
    $(".toggle-trigger").click(function() { 
     $(this).parent().nextAll('.toggle-wrap').first().toggle('slow'); 
    }); 
}); 

http://jsfiddle.net/sYPWN

1回の警告で入手可能な全作業例：あなたがsufficentlyあなたのHTMLマークアップを変更する場合、それはあなたのjQueryのコードを壊すことがあります。例えば、トグル・トリガーを別のdivにラップすると、jQueryを.parent（）。parent（）に変更する必要があります（http://jsfiddle.net/Xmvxf/1/最初の切り替えはどのように動作しますが、2番目の切り替えはしません）

アイデアが得られたと思いますので、ニーズに合わせて修正することができます。

Answer 2

それは素子の状態を区別するためのIDを使用していますので、それが働いていない理由があります。正しいHTMLには、同じIDを持つ要素が2つ以上あってはなりません。それは無効です。

2番目の要素のトグルラップIDを別のものに変更し、その新しいIDのトグルを追加するだけです。その後、正常に動作します。 :)

Answer 3

はそれぞれにクラスを入れて、あなたのスクリプトで

ex 
<a id="toggle-trigger1" class="trigger">Click to toggle</a> 
<a id="toggle-trigger2" class="trigger">Click to toggle</a> 
<a id="toggle-trigger3" class="trigger">Click to toggle</a> 

を切り替えるこの

$(".trigger").click(function() { 
    //code here 
});