使用 CSS 和 JS 的 HTML 可折叠表格部分

Question

All of this is sample code laid out identical to my actual code.所有这些都是与我的实际代码相同的示例代码。 Just shorter.只是更短。 I'm trying to get the subsections of the table to close separate of the main header sections.我试图让表格的子部分关闭主要标题部分。 So, when you first go to the page it looks like this: Table with Main Headers & content collapsed所以，当你第一次进入页面时，它看起来像这样：带有主标题和内容的表格折叠起来

Then when you click on the header, I want it to open up with the subheaders and their content collapsed: Table Headers clicked with table subheaders collapsed然后，当您单击标题时，我希望它打开时带有子标题并且它们的内容已折叠： Table Headers clicked with table subheaders collapsed

Then you can click on the subheadings to open the actual content: Table subheaders clicked with data shown然后您可以点击副标题打开实际内容：点击表格副标题并显示数据

So far, I can get the main header sections to close.到目前为止，我可以关闭主要的标题部分。 I just have no idea how to keep the subheaders collapsed when you click on the main headers.我只是不知道如何在您单击主标题时保持子标题折叠。

Here is my .html:这是我的 .html：

<!DOCTYPE HTML>
<html>
    <head>
        <style> 
            .parent {cursor: pointer; background-color: rgba(234, 118, 86, 1.0);}
            .parent ~ .child {display: none;}
            .open .parent ~ .child {display: table-row;}
            table {border-radius: 5px; margin-bottom: 2em;}
            th {border: solid black; font-size: 28px; border-radius: 10px;}
            td {border: solid black; font-size: 23px; border-radius: 5px; padding: .5em; background-color: rgba(234, 118, 86, 1.0);}
        </style>
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>  
        <script src="table.js"></script>
    </head>
    
    <body>
        <table>
            <tbody>
            <tr class="parent"><th colspan="3">Table Section 1</th></tr>
                <tr class="child"><th colspan="3">Table Subsection 1</th></tr>
                    <tr class="child"><th>Name</th><th>Age</th><th>City</th></tr>
                    <tr class="child"><td>Lorem</td><td>Ipsum</td><td>Dolor</td></tr>
                    <tr class="child"><td>Sit</td><td>Amet</td><td>Consectetur</td></tr>
                    
                <tr class="child"><th colspan="3">Table Subsection 2</th></tr>
                    <tr class="child"><th>Name</th><th>Age</th><th>City</th></tr>
                    <tr class="child"><td>Adipiscing</td><td>Elit</td><td>Sed</td></tr>
                    <tr class="child"><td>Do</td><td>Eiusmod</td><td>Tempor</td></tr>
            </tbody>
            <tbody>
            <tr class="parent"><th colspan="3">Table Section 2</th></tr>
                <tr class="child"><th colspan="3">Table Subsection 1</th></tr>
                    <tr class="child"><th>Name</th><th>Age</th><th>City</th></tr>
                    <tr class="child"><td>Incididunt</td><td>Ut</td><td>Labore</td></tr>
                    <tr class="child"><td>Et</td><td>Dolore</td><td>Magna</td></tr>
                    
                <tr class="child"><th colspan="3">Table Subsection 2</th></tr>
                    <tr class="child"><th>Name</th><th>Age</th><th>City</th></tr>
                    <tr class="child"><td>Aliqua</td><td>Ut</td><td>Enim</td></tr>
                    <tr class="child"><td>Quis</td><td>Nostrud</td><td>Exercitation</td></tr>
            </tbody>
        </table>
    </body>
</html>

And my .js file:我的 .js 文件：

$(document).ready(function() {
    $('table').on('click', 'tr.parent', function() {
        $(this).closest('tbody').toggleClass('open');
    });
}); // end ready

I've tried using the same code with the tbody tag and something like parent2, but it goes wonky instantly.我试过对 tbody 标签和类似 parent2 的东西使用相同的代码，但它立即变得不稳定。 Anybody have any good resources to help me out or know how I can get the subheaders to collapse?任何人都有任何好的资源来帮助我或知道如何让子标题崩溃？

Answer 1

You can use JQuery's nextUntil():你可以使用 JQuery 的 nextUntil()：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!DOCTYPE HTML> <html> <head> <style> .parent {cursor: pointer; background-color: rgba(234, 118, 86, 1.0);} .parent ~ .child, .parent ~ .child2 {display: none;} .open .parent ~ .child, .child2.open {display: table-row;} table {border-radius: 5px; margin-bottom: 2em;} th {border: solid black; font-size: 28px; border-radius: 10px;} td {border: solid black; font-size: 23px; border-radius: 5px; padding: .5em; background-color: rgba(234, 118, 86, 1.0);} </style> <script> $(document).ready(function() { $('table').on('click', 'tr.parent', function() { $(this).closest('tbody').toggleClass('open'); }); $('table').on('click', 'tr.child', function() { $(this).nextUntil('.child').toggleClass('open'); }); }); </script> </head> <body> <table> <tbody> <tr class="parent"><th colspan="3">Table Section 1</th></tr> <tr class="child"><th colspan="3">Table Subsection 1</th></tr> <tr class="child2"><th>Name</th><th>Age</th><th>City</th></tr> <tr class="child2"><td>Lorem</td><td>Ipsum</td><td>Dolor</td></tr> <tr class="child2"><td>Sit</td><td>Amet</td><td>Consectetur</td></tr> <tr class="child"><th colspan="3">Table Subsection 2</th></tr> <tr class="child2"><th>Name</th><th>Age</th><th>City</th></tr> <tr class="child2"><td>Adipiscing</td><td>Elit</td><td>Sed</td></tr> <tr class="child2"><td>Do</td><td>Eiusmod</td><td>Tempor</td></tr> </tbody> <tbody> <tr class="parent"><th colspan="3">Table Section 2</th></tr> <tr class="child"><th colspan="3">Table Subsection 1</th></tr> <tr class="child2"><th>Name</th><th>Age</th><th>City</th></tr> <tr class="child2"><td>Incididunt</td><td>Ut</td><td>Labore</td></tr> <tr class="child2"><td>Et</td><td>Dolore</td><td>Magna</td></tr> <tr class="child"><th colspan="3">Table Subsection 2</th></tr> <tr class="child2"><th>Name</th><th>Age</th><th>City</th></tr> <tr class="child2"><td>Aliqua</td><td>Ut</td><td>Enim</td></tr> <tr class="child2"><td>Quis</td><td>Nostrud</td><td>Exercitation</td></tr> </tbody> </table> </body> </html>

使用 CSS 和 JS 的 HTML 可折叠表格部分

问题描述

1 个解决方案

解决方案1
1 2020-09-28 09:07:11

使用 CSS 和 JS 的 HTML 可折叠表格部分

问题描述

1 个解决方案

解决方案1 1 2020-09-28 09:07:11

解决方案1
1 2020-09-28 09:07:11