如果打开则隐藏子行并切换所有子行在展开全部按钮单击

Question

ExpandAll按钮未正确触发。如果在ExpandAll按钮之前显示任何子行，则会隐藏该特定行，并显示剩余的子行。

但是我希望这个工作就像点击ExpandAll按钮一样，如果打开任何子行，它应该与其他子行一起显示，并与其他子行一起关闭。

$(document).on('click', '#ExpandAll', function() {
  $('#Table > tbody > tr[class*=child]').each(function() {

    $(this).toggle();


  });
});

$(document).on('click', 'button.BundleExpand', function() {

  var className = $(this).closest('tr').attr('class');
  var number = parseFloat(className.match(/-*[0-9]+/));

  if ($('.child' + number + ':visible').length)
    $('.child' + number).hide();
  else
    $('.child' + number).show();
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default " id="ExpandAll">
Expand All
</button>
<table id="Table" class="table table-bordered table-stripped">
  <tbody>
    <tr class="parent1">
      <td>One</td>
      <td>
        <button type="button" class="btn btn-default BundleExpand">Expand One</button>
      </td>
    </tr>
    <tr class="child1" style="display:none">
      <td>Two</td>
    </tr>
    <tr class="parent2">
      <td>One</td>
      <td>
         <button type="button" class="btn btn-default BundleExpand">Expand One</button>
      </td>
    </tr>
    <tr class="child2" style="display:none">
      <td>Two</td>
    </tr>
    <tr class="parent3">
      <td>One</td>
      <td>
         <button type="button" class="btn btn-default BundleExpand">Expand One</button>
      </td>
    </tr>
    <tr class="child3" style="display:none">
      <td>Two</td>
    </tr>
  </tbody>

</table>

请提出任何建议。谢谢。

Answer 1

在expand all listener中更新你的选择器以消除可见的孩子：

 $(document).on('click', '#ExpandAll', function() {

  var affectedChildren =  $('#Table > tbody > tr[class*=child]:not(:visible)');

  if( affectedChildren.length ==0)
  {
    affectedChildren =  $('#Table > tbody > tr[class*=child]');
  }

  affectedChildren.each(function() {
    $(this).toggle();
  });

});

Answer 2

尝试添加类似下面代码的内容

if (s === 0) {
  $(this).toggle()
} else if (s === m) {
    $(this).toggle();
} else {
  if (!$(this).is(":visible"))
    $(this).toggle();
  }

s和m来自：

var s = $('#Table > tbody > tr[class*=child]:visible').length;
var m = $('#Table > tbody > tr[class*=child]').length;

＆＃13;

＆＃13;

$(document).on('click', '#ExpandAll', function() {
  var s = $('#Table > tbody > tr[class*=child]:visible').length;
  var m = $('#Table > tbody > tr[class*=child]').length;
  $('#Table > tbody > tr[class*=child]').each(function() {

    if (s === 0) {
      $(this).toggle()
    } else if (s === m) {
        $(this).toggle();
    } else {
      if (!$(this).is(":visible"))
        $(this).toggle();
      }



  });
});

$(document).on('click', 'button.BundleExpand', function() {

  var className = $(this).closest('tr').attr('class');
  var number = parseFloat(className.match(/-*[0-9]+/));

  if ($('.child' + number + ':visible').length)
    $('.child' + number).hide();
  else
    $('.child' + number).show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<button class="btn btn-default " id="ExpandAll">
Expand All
</button>
<table id="Table" class="table table-bordered table-stripped">
  <tbody>
    <tr class="parent1">
      <td>One</td>
      <td>
        <button type="button" class="btn btn-default BundleExpand">Expand One</button>
      </td>
    </tr>
    <tr class="child1" style="display:none">
      <td>Two</td>
    </tr>
    <tr class="parent2">
      <td>One</td>
      <td>
        <button type="button" class="btn btn-default BundleExpand">Expand One</button>
      </td>
    </tr>
    <tr class="child2" style="display:none">
      <td>Two</td>
    </tr>
    <tr class="parent3">
      <td>One</td>
      <td>
        <button type="button" class="btn btn-default BundleExpand">Expand One</button>
      </td>
    </tr>
    <tr class="child3" style="display:none">
      <td>Two</td>
    </tr>
  </tbody>

</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是打开和关闭的工作小提琴：

＆＃13;

＆＃13;

var visible = false;

$(document).on('click', '#ExpandAll', function() {
  visible = !visible;
  $('#Table > tbody > tr[class*=child]').each(function() {
    if(visible && !$(this).is(":visible")){
      $(this).toggle();
    } else if(!visible && $(this).is(":visible")) {
      $(this).toggle();
    }
  });
});

$(document).on('click', 'button.BundleExpand', function() {
  var className = $(this).closest('tr').attr('class');
  var number = parseFloat(className.match(/-*[0-9]+/));

  if ($('.child' + number + ':visible').length)
    $('.child' + number).hide().removeClass("shown");
  else
    $('.child' + number).show().addClass("shown");
});

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button class="btn btn-default " id="ExpandAll">
Expand All
</button>
<table id="Table" class="table table-bordered table-stripped">
  <tbody>
    <tr class="parent1">
      <td>One</td>
      <td>
        <button type="button" class="btn btn-default BundleExpand">Expand One</button>
      </td>
    </tr>
    <tr class="child1" style="display:none">
      <td>Two</td>
    </tr>
    <tr class="parent2">
      <td>One</td>
      <td>
         <button type="button" class="btn btn-default BundleExpand">Expand One</button>
      </td>
    </tr>
    <tr class="child2" style="display:none">
      <td>Two</td>
    </tr>
    <tr class="parent3">
      <td>One</td>
      <td>
         <button type="button" class="btn btn-default BundleExpand">Expand One</button>
      </td>
    </tr>
    <tr class="child3" style="display:none">
      <td>Two</td>
    </tr>
  </tbody>

</table>

＆＃13;

＆＃13;

＆＃13;