可打开的手风琴并排都会在单击手风琴时展开，如何只打开被单击的手风琴？
可打开的手风琴并排都会在单击手风琴时展开，如何只打开被单击的手风琴？
提问于 2019-01-09 05:31:07
我正在制作一个练习的网站，它有多个可扩展的部分，其中一些是并排的。我让手风琴正常工作，但所需的行为是当您单击按钮展开一个手风琴时，所有其他的保持关闭。目前，这在技术上是正确的，但在同一行中被单击的折叠面板旁边的任何部分都会将它们的div展开为与被单击折叠面板中的文本相同的大小。
这里有一个小提琴来展示我的意思：https://jsfiddle.net/jsfsmh/m5x08awc/1/，但你必须扩展结果窗口，以确保两个Div坐在一起，而不是在另一个的顶部。下面是手风琴的相关内联JavaScript：
<script type="text/javascript">
var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>我确信我可以在这里做一些显而易见的事情，但我已经努力了几天，我感到迷茫。我是JavaScript的初学者，我想说可能是CSS/HTML的新手。任何帮助都将深表感谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-09 06:00:52
你可以用一行css来解决这个问题！
问题是，当你去display:flex时，flexbox应用了一堆标准规则，其中之一是align- items : stretch，它会让较小的flexbox项目自动调整大小，以填充横轴上的空间(在本例中是高度)。您可以在此处查看选项：align-items
要修复它，请添加以下内容
align-items: flex-start;添加到您的flexbox容器。
工作JSFiddle：JSFiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54103764
复制相关文章
相似问题
从ConcurrentDictionary中删除项
基于条件键从ConcurrentDictionary中删除多个项
如何在最终完成ConcurrentDictionary后从ContinueWith中删除项
从ConcurrentDictionary中删除多个元素
嵌套的ConcurrentDictionary
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
