Question

我正在创建一个练习的网站，其中包含多个可扩展的部分，其中有些并排放置。我有手风琴正在工作，但是所需的行为是当您单击按钮以展开一个手风琴时，其他所有手风琴保持关闭状态。目前，从技术上讲这是正确的，但是同一行中单击手风琴旁边的任何部分的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的新手水平。任何帮助将不胜感激。

Answer 1

您可以使用一行CSS来解决此问题！

问题在于，当您进入display：flex时，flexbox会应用一堆标准规则，其中一个是align-items：Stretch，这会使较小的flexbox项自动调整大小以填充横轴上的空间（在这种情况下，高度）。您可以在此处查看选项：align-items

要修复此问题，请添加以下内容

align-items: flex-start;

到您的flexbox容器。

工作中的JSFiddle：JSFiddle

单击手风琴时，可打开的手风琴并排都展开，我如何只单击一下打开？

1 个答案: