javascript - 单击 Accordion 时，可并排打开的 Accordion 都会展开，如何仅打开单击的 Accordion ？

Question

我正在制作一个练习网站，该网站具有多个可扩展部分，其中一些部分并排放置。我有 Accordion 工作，但所需的行为是当您单击按钮展开一个 Accordion 时，所有其他 Accordion 保持关闭状态。目前这在技术上是正确的，但同一行中单击的 Accordion 旁边的任何部分的 div 都会扩展为与单击的 Accordion 中的文本大小相同。

这是一个 fiddle 来展示我的意思:https://jsfiddle.net/jsfsmh/m5x08awc/1/但是您必须扩大结果窗口以确保两个 Div 彼此相邻而不是彼此叠置。以下是 Accordion 的相关内联 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 可能是新手。任何帮助将不胜感激。

Answer 1

一行CSS就能解决这个问题!

问题是，当您使用 display:flex 时，flexbox 应用了一堆标准规则，其中之一是align-items:stretch，这使得较小的 Flexbox 项目自动调整大小以填充横轴中的空间(在这种情况下是高度)。您可以在此处查看选项:align-items

要修复它，请添加以下内容

align-items: flex-start;

到你的弹性盒容器。

工作中的 JSFiddle: JSFiddle