Question

第一次使用stackoverflow，所以请不要打我太多。

我正在使用Codepen中的现有代码，并试图弄清楚如何使表一次扩展。

当前，如果我们单击多个“ +”图标，它们将保持打开状态，想知道我们如何做到这一点，以便在单击“ +”符号时关闭之前展开的项目。

我尝试将此处的布局调整为无效：

$('.js-tdToggle').on('click', function(){
    if(window.innerWidth < 681){
        $(this).toggleClass("fa-plus-square fa-minus-square");
        var trParent = $(this).parent().parent();
        trParent.toggleClass("collapse");
    } else {
        $(this).toggleClass("fa-plus-square fa-minus-square");
        var tdParent = $(this).parent();
        tdParent.next("td").toggleClass("collapse");
    }   
});

Original Source Codepen

Answer 1

您必须添加代码，在其他所有切换上执行相反的操作。 jQuery的.not()函数对此非常有用。通过我的更改，JavaScript如下所示：

$('.js-tdToggle').on('click', function() {
  var $otherToggles = $(".js-tdToggle.fa-minus-square");
  if (window.innerWidth < 681) {
    $(this).toggleClass("fa-plus-square fa-minus-square");
    $otherToggles.not(this).toggleClass("fa-minus-square fa-plus-square");
    var trParent = $(this).parent().parent();
    trParent.toggleClass("collapse expand");
    var $otherParents = $otherToggles.parent().parent();
    $otherParents.removeClass("expand").addClass(" collapse");
  } else {
    $(this).toggleClass("fa-plus-square fa-minus-square");
    $otherToggles.not(this).toggleClass("fa-minus-square fa-plus-square");
    var tdParent = $(this).parent();
    tdParent.next("td").toggleClass("collapse expand");
    var $otherParents = $($otherToggles).not(this).parent();
    $otherParents.next("td").toggleClass("expand collapse");
  }
});

您可以参考我的叉笔来查看它的作用：codepen.io

响应式可折叠表一次：

1 个答案: