jquery - 表格行作为下拉列表

Question

我有一个 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");
    }
});

当我尝试在隐藏行中添加第二行和第三行时，例如：

   <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>

，它不起作用。我做错什么了？

Answer 1

请参阅此示例。

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

它切换了几行。您也可以通过这种方式轻松拥有多个答题器。

Answer 2

你需要siblings而不是next.. next 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');

});