创建具有多个级别的折叠式表格

Question

我正在尝试创建一个带有多个标题的折叠表，这些标题会扩展以显示多个展开的子标题。

我到目前为止的HTML：

<tbody>

<tr class="header">
  <th colspan="2">Header</th>
</tr>

<tr>
  <td>Sub-Header1</td>
  <td>sub-info</td>
  <td>sub-info</td>
  <td>sub-info</td>
</tr>
<tr>
  <td>Sub-Header2</td>
  <td>sub-info</td>
  <td>sub-info</td>
  <td>sub-info</td>
</tr>

</tbody>

这是我到目前为止的Javascript：

<script>
$('.header').click(function(){
$(this).nextUntil('.header').slideToggle(100, function(){
    });
});
</script>

到目前为止，一切似乎都在起作用，除非我展开并折叠子标题，然后尝试折叠主标题，子标题会打开。我很确定它与javascript有关，但我不确定如何解决这个问题或继续。

如果有人可以帮我修复这段代码，或者给我一个创建这个手风琴表的新方法，我会非常感激！

Answer 1

这样的事情会起作用吗，或者这是你想要实现的目标？ JSFiddle：http://jsfiddle.net/biz79/d02rm189/1/

假设以下结构：

头

Subheader1 img一些文本链接

Subheader2 img一些文本链接

单击子标题1时，信息隐藏或显示当您单击子标题2时，信息隐藏或显示当您单击标题时，信息隐藏或显示

HTML

<table>
<tbody>

<tr class='mainheader'>
    <th>Header</th>
</tr>

<tr>
  <td class="header">Sub-Header1
    <div class="hideMe">

      <img alt ="yellowpic"  src="https://dl.dropboxusercontent.com/u/2542034/colorPicks/yellow.png">
        <p>sub-info blah blah<p>
        <a>sub-info link</a>

    </div></td>
</tr>

<tr>
  <td class="header">Sub-Header2
  <div class="hideMe">
    sub-info<br>
    sub-info<br>
    sub-info
  </div></td>
</tr>

</tbody>
</table>

JS：

$('.mainheader').on("click", function(){
  $(this).siblings()
         .slideToggle(100);
});

$('.header').on("click", function(){
  $(this).find('.hideMe')
         .slideToggle(100);
});