jquery - jQuery 多个幻灯片切换

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() 将返回您单击的元素的以下兄弟。在这里查看更多。