[英]Openable accordions side-by-side both expand when accordion clicked, how do I have only the clicked one open?
我正在制作一个具有多个可扩展部分的练习网站,其中有些部分并排放置。 我有手风琴正在工作,但是所需的行为是当您单击按钮以展开一个手风琴时,其他所有手风琴保持关闭状态。 目前,从技术上讲这是正确的,但是同一行中单击手风琴旁边的任何部分的div都将扩展为与单击手风琴中的文本相同的大小。
这是一个小提琴,用来显示我的意思: https : //jsfiddle.net/jsfsmh/m5x08awc/1/但您必须扩展结果窗口,以确保两个Divs彼此并排放置,而不是彼此叠放。 这是手风琴的相关内联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的新手水平。 任何帮助将不胜感激。
您可以使用一行CSS解决此问题!
问题是,flexbox在您执行display:flex时会应用一堆标准规则,其中一个是align-items:Stretch,这会使较小的flexbox项目自动调整大小以填充横轴上的空间(在这种情况下)高度)。 您可以在此处查看选项: align-items
要修复它,添加以下内容
align-items: flex-start;
到您的flexbox容器。
工作的JSFiddle: JSFiddle
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.