时间戳

首页 > 解决方案 > 在第一个 div 的高度增加时将第二个 div 推到下面

css - 在第一个 div 的高度增加时将第二个 div 推到下面

问题描述

我正在制作手风琴按钮并将其 div 包裹在 div 容器中。我想将它们保持在 2 列的网格中。如下图，

在此处输入图像描述

但是当我打开其中一个时，下面的 div 应该向下推。我尝试使用两者display:grid，display:flex但它没有被推送。它位于第二个手风琴按钮的后面。我怎么推？我只需要一个想法。不准确的代码。

在此处输入图像描述

标签： csssass

解决方案

您需要展开下拉菜单。我认为发生的事情是下拉显示在其他下拉列表之上，因此其他下拉列表不会被向下推。

这是它的代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
    background-color: grey;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}


.content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: white;
    border: 1px solid black;
}
</style>
</head>
<body>
<button type="button" class="collapsible">Dropdown 1</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet</p>
</div>
<button type="button" class="collapsible">Dropdown 2</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet</p>
</div>
<button type="button" class="collapsible">Dropdown 3</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet</p>
</div>

<script>
    let coll = document.getElementsByClassName("collapsible");
    let i;

    for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function() {
            let content = this.nextElementSibling;
            if (content.style.display === "block") {
            content.style.display = "none";
            } else {
            content.style.display = "block";
            }
        });
    }
</script>

</body>
</html>

这里content有一个显示none。单击它时，content将显示block。当按钮被点击时，Javascript 会检查，如果content有块的显示，它会改变它，none反之亦然。

我希望你理解我的代码。尝试查看w3schools 的此链接以获取更多详细信息。还有一个部分可用于动画下拉列表和添加图标。

推荐阅读