Question

我想像我的代码中那样折叠“ child tr”中的“ tr”，但是我不能在它的父tr之下折叠它。当我在JSFiddle上尝试它时，它可以正常工作，但是在我的编辑器上对其进行工作并实时预览时，它不能正常工作。在这种情况下，两个“子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的版本可能会有所帮助。

如何将孩子tr折叠在其父栏的正下方？

1 个答案: