如何在其父列下方折叠我的孩子 tr？

Question

我想在“child tr”中折叠“tr”，就像在我的代码中一样，但我不能在其父 tr 下方折叠它。当我在 JSFiddle 上尝试它时它可以正常工作，但是在我的编辑器上工作并实时预览它时它却不能。在这种情况下，两个“child tr”都显示在表格的末尾。

我尝试了在 StackOverflow 上找到的所有答案和几个小提琴，但我无法解决问题，所以我相信我遗漏了一些东西，而且我不明白是什么，很遗憾。

这是我的代码：

<table>

    <tbody id="mainTableBody" class="topborder" aria-live="polite" aria-relevant="all">      
        <tr class="rowheader1">
            <td>1</td>
            <td>Curating</td>
            <td>The Book Affair</td>
            <td>Automatic Books</td>
            <td>2009</td>
        </tr>
        <tr class="projectinfo1">
            <td></td>
            <td class="align-top">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi!</td>
            <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi!
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi!
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi!</td>
            <td></td>
            <td></td>
        </tr>

        <tr class="rowheader2">
            <td>2</td>
            <td>Project Management</td>
            <td>Fragile?</td>
            <td>Pentagram Stiftung</td>
            <td>2013</td>
        </tr>
        <tr class="projectinfo2">
            <td></td>
            <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</td>
            <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</td>
            <td></td>
            <td></td>
        </tr>

        </tbody>

</table>

我的 CSS：

body {
    padding:0;
    margin: 0;
}

.rowheader {
    display: table-row;
    border-bottom: none !important;
}

.projectinfo1 {
    display: none;
}

.projectinfo2 {
    display: none;
}

这是我非常简单的脚本功能：

$(".rowheader1").click( function() { $(".projectinfo1").toggle(); } );
$(".rowheader2").click( function() { $(".projectinfo2").toggle(); } );

最后，我用它制作的小提琴，它可以正常工作：JSFiddle

非常感谢！

Answer 1

你的 jquery 版本是什么？尝试高于 1.9 的版本可能会有所帮助。