0 
$(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>
4

1 に答える 1

0

idの代わりにクラスを使用してクエリを実行してみてください。

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

デモ： http： //jsfiddle.net/WMzKm/

jqueryにまだ慣れていない場合：$（this）.next（）は、クリックしている要素の次の兄弟を返します。詳しくはこちらをご覧ください。

于 2013-02-28T03:53:31.503 に答える