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。