响应式可折叠表一次一个：

Posted 2021-04-09

第一次在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

答案

您必须添加代码，在其他每个切换上执行相反的操作。 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