Javascript 如何将子tr折叠到其父列的正下方？

我想像在我的代码中一样在“child tr”中折叠“tr”，但我不能将它折叠到其父tr的正下方。当我在JSFIDLE上尝试它时，它可以正常工作，但在我的编辑器上使用它并实时预览它时，它不能正常工作。在这种情况下，两个“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>

这是我非常简单的脚本函数：

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

最后，我用它做了一把小提琴，就像我做的一样：

---

多谢各位

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

好奇的是，您是否在代码中包含了jQuery？您是否使用了jQuery插件code.jQuery.com/jQuery-3.3.1.slim.min.js“>”在本例中，两个“child tr”都显示在表的末尾-我看不出仅仅切换

display

属性的值应该如何改变元素的顺序…如果忽略显示的最后两个CSS规则，则会发生什么情况，以便从一开始就可以看到所有内容-元素的顺序“错误”那么呢？如果是这样的话，那就意味着要么你的HTML有问题，要么应用了额外的格式。@Mirakurun是的，我实际上包括了最后一个jQueryversion@04FS如果我取出“显示：无“事实上，规则元素的顺序仍然是错误的。我真正不能理解的是，为什么JSFIDLE中的代码可以正常工作。可能是因为我的代码的其他部分吗？我实际上包含了jQuery的最新版本

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