Question

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

我的问题是让多个events一次切换多个eventdetails。我考虑过每个人都有不同的身份证。但是，我无法弄清楚如何通过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

尝试使用class而不是id：

进行查询

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

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

如果你还不熟悉jquery：$（this）.next（）返回你点击的元素的以下兄弟。查看更多here。

jQuery多个幻灯片切换

1 个答案: