时间戳

首页 > 解决方案 > 当手风琴点击时，可打开的手风琴并排展开，我如何只打开点击的手风琴？

javascript - 当手风琴点击时，可打开的手风琴并排展开，我如何只打开点击的手风琴？

问题描述

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

这是一个 Fiddle 来说明我的意思：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 的新手级别。任何帮助将不胜感激。

标签： javascripthtml

解决方案

你可以用一行 css 解决这个问题！

问题是当你去 display:flex 时，flexbox 应用了一堆标准规则，其中一个是 align-items:stretch，它使较小的 flexbox 项目自动放大以填充横轴上的空间（在这种情况下高度）。您可以在此处查看选项：align-items

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

align-items: flex-start;

到你的 flexbox 容器。

工作 JSFiddle：JSFiddle

推荐阅读