Question

如何使它一次只扩展一个...这样当一个扩展而另一个扩展时就会崩溃。有任何想法吗？这是小提琴和代码。

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

试试这个

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

Answer 2

下面： HTML：

<table class="table">
    <tbody>
        <tr>
            <td><span class="btn btn-default expandBtn" data-id="2479">expand</span></td>
        </tr>
        <tr class="child-2479 child">
            <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>
            <td><span class="btn btn-default expandBtn" data-id="2800">expand</span></td>
        </tr>
        <tr class="child-2800 child">
            <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>

使用Javascript / jQuery的

$(document).ready(function() {
    $('.child').hide();
    $('.expandBtn').click(function(){
        $('.child').hide();
        var id = $(this).data('id');
        $('tr.child-' + id).show();
    });
});

https://jsfiddle.net/wortigern/g0d7a6q5/

Answer 3

另一种可能性是：

build /F /g /w /b /c /Z /jpath %BUILDROOT%

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

Answer 4

单击时，隐藏除要切换的行之外的所有“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

一次展开/折叠一个

4 个答案: