jquery - 使用选择器在 jQuery 中显示隐藏的嵌套表

Question

我有几个嵌套表的html（在这个例子中只有一个嵌套）：

<table class="toptable" border="1">
    <tbody>                   
        <tr class="accordion">
            <td>TD1</td>
            <td>TD2</td>
            <td>TD3</td>
        </tr>
        <tr>
            <td colspan="3">
            <table class="nested" border="1">
                <tbody>
                    <tr>
                        <td>nestedTD1</td>
                        <td>nestedTD2</td>
                    </tr>
                    <tr>
                        <td>nestedTD3</td>
                        <td>nestedTD4</td>
                    </tr>
                </tbody>
            </table>          
            </td>
        </tr>
    </tbody>
</table>

我的 jQuery 允许我通过单击第一行来显示/隐藏主表的第二行。

$(function() {
  $(".toptable tr:not(.accordion)").hide();
  $(".toptable tr:first-child").show();
  $(".toptable tr.accordion").click(function(){
  $(this).nextAll().fadeToggle();
    });
  });

工作示例在这里：http: //jsfiddle.net/nbag/pAxry/1/

我的问题是只显示嵌套表的第一行。我想在 jquery 上的树遍历中存在这个问题；我试图更改nextAll()为find("*")，但它不起作用。

非常感谢您的帮助！

Answer 1

我认为问题在于隐藏表格行的第一个选择器。试试这个（演示）：

$(function () {
    $(".toptable > tbody > tr:not(.accordion)").hide();
    $(".toptable tr:first-child").show();
    $(".toptable tr.accordion").click(function () {
        $(this).next().fadeToggle();
    });
});