javascript - 响应式可折叠表格一次一个 :

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");
  }
});

你可以引用我的 fork 笔来查看它的实际效果:codepen.io