Javascript 响应性可折叠表格，一次一张：

第一次在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");
    }   
});

$（'.js tdToggle'）。打开（'click'，function（）{
如果（窗内宽度<681）{
$（this.toggleClass（“fa加平方fa减平方”）；
var trParent=$（this.parent（）.parent（）；
trParent.toggleClass（“崩溃”）；
}否则{
$（this.toggleClass（“fa加平方fa减平方”）；
var tdParent=$（this.parent（）；
tdParent.next（“td”）.toggleClass（“崩溃”）；
}   
});

---

您必须添加代码，以便在每隔一次切换时执行相反的操作。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");
  }
});

$（'.js tdToggle'）。打开（'click'，function（）{
var$otherToggles=$（“.js tdToggle.fa减号”）；
如果（窗内宽度<681）{
$（this.toggleClass（“fa加平方fa减平方”）；
$otherToggles.not（this.toggleClass）（“fa减平方fa加平方”）；
var trParent=$（this.parent（）.parent（）；
trParent.toggleClass（“折叠展开”）；
var$otherParents=$otherToggles.parent（）.parent（）；
$otherParents.removeClass（“扩展”）.addClass（“折叠”）；
}否则{
$（this.toggleClass（“fa加平方fa减平方”）；
$otherToggles.not（this.toggleClass）（“fa减平方fa加平方”）；
var tdParent=$（this.parent（）；
tdParent.next（“td”）.toggleClass（“折叠展开”）；
var$otherParents=$（$otherToggles）.not（this.parent（）；
$otherParents.next（“td”）.toggleClass（“展开-折叠”）；
}
});

---

您可以参考我的叉形笔查看它的使用情况：

Java！=JavaScriptthis工作完美无瑕。。。但是当我使用chrome开发工具将输出视图改为Galaxy 5时，图标似乎不能正常工作。然而，当在Ipad上观看时，它工作得非常完美，因此我想知道是否应该在js文件或css中添加大小检查，以检查屏幕尺寸是否发生变化。@zmerlin很抱歉，我应该测试

窗口。innerWidth<681

部分更多，我已经用我的修复更新了答案。你能确认它现在能正常工作吗？就是这样！通过chrome dev工具确认在响应模式下工作，无论大小和方向如何。