Question

我有一个使用扩展行功能的表。我正在尝试使用“ toggleClass”添加一个全部展开以全部展开。

我发现的问题是，如果一行已被展开，然后单击全部展开，则该打开的行将关闭，因为我要它从打开切换到关闭。很有道理。

即使一些行已经打开，是否也可以使所有行打开？或者相反，即使有一些打开和关闭，也要关闭所有？无需使用两个按钮-一个用于全部打开，一个用于全部关闭（这是一个简单的changeClass）

$('table').on('click', 'tr.parent ', function () {
$(this).closest('tbody').toggleClass('open');
});
$(".expandall").click(function () {
$("tbody").toggleClass('open');
});

任何帮助表示赞赏。 https://codepen.io/jjspelman/pen/GwRyNE

Answer 1

根据我的评论，只需具有两个不同的按钮，但一次仅显示一个按钮，就可以轻松解决此问题。通过这种方式，不是试图跟踪要让单个按钮充当Expand All还是Collapse All的状态，而是显示按钮的固有功能。对用户来说，看起来就像“一个”按钮的文本标签正在更改。

HTML更改：

<thead>
<tr class="tableheader">
    <th class="expandall"><i style="color: #fff;" class="far fa-chevron-circle-down"></i></th>
    <th class="expandall" style="text-align: left;">Expand All</th>
    <th class="collapseall" style="text-align: left;">Collapse All</th> <!-- New cell/button here -->
    <th>Column<br />One</th>
    <th>Column<br />Two</th>
    <th>Column<br />Three</th>
    <th>Column<br />Four</th>
</tr>
</thead>

（您可以像我一样应用内联样式或使用现有的CSS规则来在初始页面加载时隐藏Collapse All按钮）

JS更改：

$(".expandall").click(function () {
  $(this).hide();
  $(".collapseall").show();
  $("tbody").addClass('open');
});
$(".collapseall").click(function () {
  $(this).hide();
  $(".expandall").show();
  $("tbody").removeClass('open');
});

分叉的CodePen：https://codepen.io/anon/pen/LXYeQR

展开表格行-切换

1 个答案: