jquery手风琴对桌子的影响

Question

我有一个以下结构的表格：

<table class="table">
  <tbody>
  <tr>
  <td>
    <div class="heading_accordion">
      some text..
    </div>
    <div class="body_accordion">
      some more text...
    </div>
  </td>
</tr>
<tr>
  <td>
    <div class="heading_accordion">
      some other text..
    </div>
    <div class="body_accordion">
      some more other text...
    </div>
  </td>
</tr>
</tbody>
</table>

我正在使用此函数创建一个折叠效果（要加载的表只显示标题div并在单击标题div时显示正文div）：

function the_accordion() {
    $('.table').each(function() {
        var thead = $(this).find('.heading_accordion');
        var tbody = $(this).find('.body_accordion');
        tbody.hide();
        thead.click(function() {
            tbody.toggle();
        })
    });
}

我遇到的问题是，当我点击一行时，它们都会被切换。我想单独改变行的状态，以便只切换被点击的行，其余部分保持未被遮挡状态。

Answer 1

你可以使用这个功能，或类似的东西

function init_accordion() {
        $(".heading_accordion".click(function() {
         var tbody = $(this).find('.body_accordion');
         tbody.toggle();
        }
    }