jQuery Multiple Slide Toggles

Question

$(document).ready(function(){ 
    $('#event1').click(function(){ 
     $('.eventdetails').slideToggle('fast'); 
    }); 
}); 

我的問題是有多個events一次切換多個eventdetails。我認爲每個人都有不同的ID。不過，我無法弄清楚如何仍然能夠通過HTML表單創建更多事件，而不是每個事件都切換每個事件的細節。

這個頁面的相關HTML：

<p class="event" id="event1">Hawksbury 1</p> 
<div class="eventdetails" > 
    <form name="event" method="post" action=""> 
     <table> 
      <tr> 
       <td><div>Transport</div></td> 
       <td><input type="checkbox" name="transport" id="transport"> </input></td> 
       <td><div>Accomodation</div></td> 
       <td><input type="checkbox" name="accomodation" id="accomodation"></input></td> 
      </tr> 
      <tr> 
       <td><div>Food</div></td> 
       <td><input type="checkbox" name="food" id="food"> </input></td> 
       <td><div>Competing</div></td> 
       <td><input type="checkbox" name="competing"  id="competing"></input></td> 
      </tr> 
      <tr>  
      <td><input type="submit"></input></td> 
      </tr> 
     </table> 
    </form> 
</div> 

Answer 1

嘗試使用類，而不是ID來查詢：

$(document).ready(function(){ 
    $('.event').click(function(){ 
     $(this).next('.eventdetails').slideToggle('fast'); 
    }); 
}); 

演示：http://jsfiddle.net/WMzKm/

如果你不熟悉的jQuery尚未： $（this）.next（）返回您點擊的元素的以下同胞。查看更多here。