Javascript 单击时如何扩展可折叠div的宽度和高度？

我试着做一个div，当点击它时，它不仅会按高度扩展（就像现在一样），还会按宽度扩展

例如，如果我有多行，每行有3个收拢的div，单击任意一行，它将扩展到整行的宽度（因此等于3个收拢的div），高度取决于收拢的数据量（假设它是一篇文章，折叠的div是一篇文章的缩略图，单击它会展开并显示整个文章/文本）

var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i-1）w3AddClass（x[i]，“show”）；
}
}
函数w3AddClass（元素、名称）{
变量i，arr1，arr2；
arr1=element.className.split（“”）；
arr2=name.split（“”）；
对于（i=0；i-1）{
arr1.拼接（arr1.indexOf（arr2[i]），1）；
}
}
element.className=arr1.join（“”）；
}

.content{
填充：0 18px；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
背景色：白色；
}
filterDiv先生{
浮动：左；
背景色：白色；
颜色：黑色；
宽度：100px；
线高：100px；
文本对齐：居中；
保证金：5px；
显示：无；
边框：1px纯黑；
}
.表演{
显示：块；
}
.集装箱{
边缘顶部：20px；
溢出：隐藏；
}

A.
知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。
B
知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。
C
知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。

如果我正确理解您要查找的内容，您可以更改一点JavaScript以获得更新的宽度：

    for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("aktualno");
    var content = this.nextElementSibling;

    if (content.style.maxHeight){
      content.style.maxHeight = null;
      content.parentElement.parentElement.style.width = "100px";
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
      content.parentElement.parentElement.style.width = "100%";
    } 
  });
}

for（i=0；i

---

这样做的目的是选择包含内容的div，例如：

，如果正在扩展，则将宽度设置为100%，如果正在收缩，则将宽度设置为100px。

单击其中一个，您可以将其他两个框的宽度设置为0%，并将所选框的宽度设置为100%。是否必须使用此显式模型？或你可以随意使用HTML/CSS/JS的另一种组合吗？我会做得非常、非常、非常简单！如果你想让我展示你可以随意留下评论。否则（如果你必须或想要保持相同的模型）对我来说，向你展示是浪费时间的。是的！就是这样！谢谢你！我花了两个小时摆弄CSS，认为解决方案就在那里……我想是时候开始正确地学习JS了。再次感谢你，我认为这是一个非常基本的问题。