可折叠 div 下推下一行 div答案

【问题标题】：Collapsible div pushing down the next row of div可折叠 div 下推下一行 div
【发布时间】：2021-12-06 21:12:14
【问题描述】：

我不太擅长 css，但我需要解决 Collapsible div 的一些对齐问题。下面的 HTML 部分在 while 循环中，我有多行 div，每行有 2 个 div。当单击第一行的第一个 div 时，它正在扩展并向下推第二行的第一个 div，这是正确的，但随着第二行的第二个 div 也向下移动。

<div class="cards">
    <div class="Interview" id="Interview">
        <?php while ($Interview_Details) { ?>
            <div class="card01">
                <div class="collapsible">
                    <div class="image"><img src="<?php echo "/images/people/" . $Interview_Details['Photo']; ?>"/></div>
                    <div class="interview"><?php echo $Interview_Details['shortDesc']; ?>
                    </div>
                </div>
                <div class="content">
                    <p><?php echo $Interview_Details['LongDesc']; ?></p>
                    <div class="padding10">&nbsp;</div>
                </div>
            </div>
        <?php } ?>
    </div>
</div>

.card01{
    width: 47%;
    height: auto;
    position: relative;
    display: inline-block;
    margin-top: 20px;
    vertical-align: top;
    min-height: 220px;
    background: rgb(255, 255, 255);
}
.content {
    max-height: 0px;
    padding: 0px 18px;
    overflow: hidden;
    transition: max-height 0.2s ease-out 0s;
}

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

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight) {
            content.style.maxHeight = null;
        } else {
            content.style.maxHeight = content.scrollHeight + "px";
        }
    });
}
</script>

【问题讨论】：

card01 是两列的容器 div 吗？另外，card01 的父级是什么？也许您可以共享您的示例的所有 HTML？
我已经更新了上面代码中的父 div。谢谢！
对不起.. 你能更新一下 HTML，这样我就可以看到页面上有 2 列的结构看起来如何？现在它只显示 1 列的结构。
就是代码。当循环执行时，我们将在 2 列和多行中获得 card01 div。
好的，我明白了。我在下面发布了答案。

标签： javascript html css collapsable

【解决方案1】：

为Expand/Collapse定义一个class

CSS

.card01 .content {
    height: 0;
    transition: 100%;
}

.card01 .content.active {
    height: auto;
}

Javascript

const cards = document.querySelectorAll("#Interview .card01")

cards.forEach(e => {
    e.addEventListener("click", () => {
        e.classList.toggle("active");

        cards.forEach(el => {
            if (el !== e) el.classList.remove("active");
        });
    });
});

【讨论】：

【解决方案2】：

card01 类每列只能出现一次...这意味着每列都有自己的容器。这是一个 sn-p 来查看 HTML 的外观。

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight) {
            content.style.maxHeight = null;
        } else {
            content.style.maxHeight = content.scrollHeight + "px";
        }
    });
}

.card01{
    width: 47%;
    height: auto;
    position: relative;
    display: inline-block;
    margin-top: 20px;
    vertical-align: top;
    min-height: 220px;
    background: rgb(255, 255, 255);
}
.content {
    max-height: 0px;
    padding: 0px 18px;
    overflow: hidden;
    transition: max-height 0.2s ease-out 0s;
}

<div class="card01">
  <div class="collapsible">
    <div class="image"><img src="/images/people/" /></div>
    <div class="interview">This is a short description</div>
  </div>
  <div class="content">
    <p>This is a long description. This is a long description. This is a long description</p>
    <div class="padding10">&nbsp;</div>
  </div>
  <div class="collapsible">
    <div class="image"><img src="/images/people/" /></div>
    <div class="interview">This is a short description</div>
  </div>
  <div class="content">
    <p>This is a long description. This is a long description. This is a long description</p>
    <div class="padding10">&nbsp;</div>
  </div>
</div>

<div class="card01">
  <div class="collapsible">
    <div class="image"><img src="/images/people/" /></div>
    <div class="interview">This is a short description</div>
  </div>
  <div class="content">
    <p>This is a long description. This is a long description. This is a long description</p>
    <div class="padding10">&nbsp;</div>
  </div>
  <div class="collapsible">
    <div class="image"><img src="/images/people/" /></div>
    <div class="interview">This is a short description</div>
  </div>
  <div class="content">
    <p>This is a long description. This is a long description. This is a long description</p>
    <div class="padding10">&nbsp;</div>
  </div>
</div>

【讨论】：