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

请参阅此example。

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

它切换了几行。你也可以用这种方式轻松点击几个。

Answer 2

您需要siblings而不是next .. next selects only 1 next sibling

<强> DEMO

$(".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');

});

表行作为下拉列表

2 个答案: