创建具有多个级别的手风琴表

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一些文本链接

当您单击subheader1时，信息会隐藏或显示当您单击subheader2时，信息会隐藏或显示当您单击Header时，信息会隐藏或显示

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);
});