javascript - 创建具有多个级别的折叠表

Question

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

我目前拥有的 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 有关，但我不确定如何解决此问题或继续。

如果有人可以帮助我修复此代码，或向我展示创建此 Accordion 表的新方法，我将非常感激!

Answer 1

这样的事情可行吗，或者这就是您想要实现的目标吗？
JSFiddle:http://jsfiddle.net/biz79/d02rm189/1/

假设以下结构:

标题

副标题1图像一些文字链接

副标题2图像一些文字链接

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

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