2

我能够折叠/展开 div。 jsfiddle

查询：

$(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>
4

2 回答 2

3

如前所述，这种结构的最佳标记是嵌套的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它们作为一个单元。

于 2013-04-13T10:37:24.040 回答
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>

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

<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>
于 2013-04-13T10:20:39.480 回答