Javascript 将可折叠div扩展到表的行

我可以折叠/扩展div。

JQuery：

$(document).ready(function () {
    $(".data").hide();
    $(".header").click(function () {
        $(this).next(".data").slideToggle(200);
    });
});

示例html：

<div class="outermost">
<p class="header">Category - 1</p>
<div class="data">
    Sub Cateogry 1.1<br/>
    Sub Cateogry 1.2
</div>
<p class="header">Category - 2</p>
<div class="data">
    Sub Cateogry 2.1<br/>
    Sub Cateogry 2.2

类别-1
子目录1.1

子目录1.2
类别-2
子目录2.1

子目录2.2

我想修改这个示例，以便它能够折叠/展开给定表的行。 （说明-我有许多类别和子类别。我计划创建一个表格，将所有类别显示为单独的行。当我们单击类别时，它应显示子类别）

div不能放在表中。因此，这种方法不起作用

请建议一些替代方案或任何我可以获得相关文档的poiner

表（类似于反馈表）：

项目反馈
类别1
子类别1.1
子类别1.2
类别2
子类别2.1

我建议在这种情况下使用ul，因为它适合树状结构 例如：

<ul class="outermost">
    <li>Category - 1</li>
    <li>
      <ul>
          <li>Sub Cateogry 1.1</li>
          <li>Sub Cateogry 1.2</li>
      </ul>
    </li>
</ul>

类别-1


子目录1.1
子目录1.2

或者，若要使用表，则必须在单元格中嵌入子表

<table class="outermost">
    <tr><td>Category - 1</td></tr>
    <tr>
        <td>
            <table>
                <tr><td>Sub Cateogry 1.1</td></tr>
                <tr><td>Sub Cateogry 1.2</td></tr>
            </table>
        </td>
    </tr>
    </table>

类别-1
子目录1.1
子目录1.2

为了保持一致性，我认为我们应该使用ul、table或block（div）。不应该把它们混在一起。如果您需要在table和div之间进行混合，请尝试以下操作：

<table class="outermost">
    <tr><td>Category - 1</td></tr>
    <tr>
        <td>
            <div>
                <div>Sub Cateogry 1.1</div>
                <div>Sub Cateogry 1.2</div>
            </div>
        </td>
    </tr>
    </table>

类别-1
子目录1.1
子目录1.2

我建议在这种情况下使用ul，因为它适合树状结构 例如：

<ul class="outermost">
    <li>Category - 1</li>
    <li>
      <ul>
          <li>Sub Cateogry 1.1</li>
          <li>Sub Cateogry 1.2</li>
      </ul>
    </li>
</ul>

类别-1


子目录1.1
子目录1.2

或者，若要使用表，则必须在单元格中嵌入子表

<table class="outermost">
    <tr><td>Category - 1</td></tr>
    <tr>
        <td>
            <table>
                <tr><td>Sub Cateogry 1.1</td></tr>
                <tr><td>Sub Cateogry 1.2</td></tr>
            </table>
        </td>
    </tr>
    </table>

类别-1
子目录1.1
子目录1.2

为了保持一致性，我认为我们应该使用ul、table或block（div）。不应该把它们混在一起。如果您需要在table和div之间进行混合，请尝试以下操作：

<table class="outermost">
    <tr><td>Category - 1</td></tr>
    <tr>
        <td>
            <div>
                <div>Sub Cateogry 1.1</div>
                <div>Sub Cateogry 1.2</div>
            </div>
        </td>
    </tr>
    </table>

类别-1
子目录1.1
子目录1.2

正如前面所建议的，这种结构的最佳标记是嵌套的

ul/ol

，但如果必须使用table，则可以使用

元素。看到这个了吗

CSS 加成

---

通过使用此技术，您将能够

将

多个表行分组，并

将它们作为一个单元显示/隐藏。
正如前面所建议的，这种结构的最佳标记是嵌套的
ul/ol
，但如果必须使用表，您可以使用
元素。看到这个了吗

CSS
加成
利用这一技术,，您可以将多个表行
分组
并将它们作为一个单元
显示/隐藏。
请显示要使用的表的标记。添加了表结构。这是一种简单的反馈表单。请显示要使用的表的标记。添加了表结构。这是一种简单的反馈表单反馈表。我添加了表结构。多个表和ul不是我的选项。我需要一个表，可以在其中切换行的可见性。我试图避免同时使用table和div，但无法找到解决方法。请建议。谢谢。我已添加了表结构。多个表和ul不是我的选项。我需要一个可以切换行可见性的表。我试图避免使用表和div一起，但无法找到一个出路。请建议。谢谢。
     $(document).ready(function () {
        $(".header").click(function () {
           $(this).next("tbody.data").slideToggle(200);
        });
     });