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，你必须在子单元格中嵌入子表

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

将可折叠div扩展到表的行

2 个答案:

CSS

标记

的JavaScript