1

HTMLテーブルがあります。行をクリックすると、ドロップダウンメニューのように一連の行が表示されるように機能を追加しようとしています。私は次のことをしました：

<table>
    <tr class="clicker">
        <td>some data</td>
    </tr>
    <tr class="hidden">
        <td>Some new data here</td>
    </tr>
</table>



$(".clicker").on("click", function () {
    if ($(this).next().hasClass("down")) {
        $(this).next().slideUp("normal").removeClass("down");
    } else {
        $(this).next().slideDown("normal").addClass("down");
    }
});

非表示の行に 2 番目と 3 番目の行を追加しようとすると、次のようになります。

   <table>
<tr class="clicker">
    <td>some data</td>
</tr>
<tr class="hidden">
    <td>Some new data here</td>

</tr>
<tr class="hidden">
    <td>Some more data here</td>

</tr>

、うまくいきません。私は何を間違えましたか？

4

2 に答える 2

1

.. siblingsの代わりに必要ですnextnext selects only 1 next sibling

デモ

$(".clicker").on("click", function(){

if($(this).siblings().hasClass("down")){
    $(this).siblings().slideDown("normal").removeClass("down");
}
else{
   $(this).siblings().slideUp("normal").addClass("down");

}
});

または

 $(".clicker").on("click", function(){

    $(this).siblings().slideToggle('normal');

});
于 2013-05-19T16:19:49.837 に答える
1

この例を参照してください。

$('.clicker').click(function(){
  $(this).nextUntil('.clicker').slideToggle('normal');
});

複数の行を切り替えます。また、この方法で簡単に複数のクリッカーを作成できます。

于 2013-05-19T16:17:49.317 に答える