jquery - jqueryアニメーショントグルが機能しない

Question

<div>
    <a href="#" class="click">Click1</a>
</div>
<div class='classshow'>Toggle Text1</div>
<div>
    <a href="#" class="click">Click2</a>
</div>
<div class='classshow'>Toggle Text1</div>

私の Javasctipt コード:

$(".click").click(function () {
    $(".classshow").slideToggle("slow");
})

この実装では、問題はすべての div がトグルを取得していて、div の隣だけがトグルされることです。助けてください

Answer 1

これは、 のクラスを持つすべての要素を選択しているためです.show。次のことを試してください。

$(".click").click(function() { 
   $(this).parent().next('.classshow').slideToggle("slow"); 
})

フィドル

hrefアンカー リンクの属性を使用して要素を選択することもできます。

<div>
    <a href="#first" class="click">Click1</a>
</div>
<div class='classshow' id='first'>Toggle Text1</div>
<div>
    <a href="#second" class="click">Click2</a>
</div>
<div class='classshow' id='second'>Toggle Text1</div>

$('.click').click(function(e){
  e.preventDefault(); // prevents the default action of the event.
  $(this.href).slideToggle();
})