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

Question

我能够折叠/展开 div。 jsfiddle

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

我想修改此示例，使其能够折叠/展开给定表的行。 （描述 - 我有很多类别和子类别。我正在计划一个表格，它将所有类别显示为单独的行。当我们点击类别时，它应该显示子类别）。

div 不能放在表格中。所以，这种方法行不通。

请提出一些替代方案或任何可以让我获得相关文档的指针。

表格（某种反馈表）：

<table><tbody>
<tr><th>Item</th><th>Feedback</th></tr>
<tr><td colspan=2>Category1</td></tr>
<tr><td>Sub Category 1.1</td><td><input type="text" ></td></tr>
<tr><td>Sub Category 1.2</td><td><input type="text" ></td></tr>
<tr><td colspan=2>Category2</td></tr>
<tr><td>Sub Category 2.1</td><td><input type="text" ></td></tr>
</tbody></table>    

Answer 1

正如之前建议的那样，这种结构的最佳标记是嵌套ul/ol，但如果您有使用表格，则可以使用<tbody> 元素。看到这个jsfiddle

CSS

 .outermost td{padding: 10px;}
 .outermost .header{background:#eee}
 .data{display: none;}
 .data td{padding-left :20px;}

标记

 <div class="outermost">
     <table>
        <tbody class="header">
           <tr>
              <td>Category - 1</td>
           </tr>
        </tbody>
        <tbody class="data">
           <tr>
              <td>Sub Cateogry 1.1</td>
           </tr>
           <tr>
              <td>Sub Cateogry 1.2</td>
           </tr>
        </tbody>
        <tbody class="header">
           <tr>
              <td>Category - 2</td>
           </tr>
        </tbody>
        <tbody class="data">
           <tr>
              <td>Sub Cateogry 2.1</td>
           </tr>
           <tr>
              <td>Sub Cateogry 2.2</td>
           </tr>
        </tbody>
     </table>
  </div>

JavaScript

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

通过使用这种技术，您将能够group 几个表行和show/hide 将它们作为一个单元。

Answer 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>

或者如果你想使用表格，你必须在单元格中嵌入子表格

<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>

为了保持一致性，我认为我们应该使用 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>