javascript - 一次展开/折叠一个

Question

如何让它一次只展开一个...这样当一个展开时另一个就会折叠。有任何想法吗？这是 fiddle 和代码。

HTML:

<table class="table">
  <tbody>
    <tr class="parent" id="2479">
        <td><span class="btn btn-default">expand</span></td>

    </tr>
    <tr class="child-2479 ">
      <td>row 1</td>
      <td>row 1</td>
      <td>row 1</td>
      <td>row 1</td>
      <td>row 1</td>
      <td>row 1</td>
    </tr>

    <tr class="parent" id="2800">
        <td><span class="btn btn-default">expand</span></td>

    </tr>
    <tr class="child-2800">
      <td>row 2</td>
      <td>row 2</td>
      <td>row 2</td>
      <td>row 2</td>
      <td>row 2</td>
      <td>row 2</td>
</tr>

    </tbody>
</table>

jQuery:

$(function() {
    $('tr.parent td span.btn')
        .on("click", function(){
            var idOfParent = $(this).parents('tr').attr('id');
            $('tr.child-'+idOfParent).toggle('slow');
        });
    $('tr[class^=child-]').hide().children('td');
});

Demo

Answer 1

单击时，隐藏所有“child-*”行，但要切换的行除外:

$(function() {
  $('tr.parent td span.btn')
    .on('click', function() {
      var next= $(this).closest('tr').next();   //this is the row to toggle
      $('tr[class^=child-]').not(next).hide();  //hide all others
      next.toggle('slow');                      //toggle it
    });

  $('tr[class^=child-]').hide();
});

Updated Fiddle