当隐藏部分打开时，如何防止弹性列扩展？

Question

我想要完成的是通过按钮（“披露”按钮）打开一个隐藏部分，但是当该部分展开时，我不希望它旁边的列也展开，因为没有需要它这样做。我觉得它必须是 Flex 设置中的一些东西，但我似乎无法弄清楚我会在哪里声明它，这样只有一列会展开并且理想情况下将它下面的一列向下推而不展开列到右边。

我也在尝试让字体真棒人字形图标在披露内容框展开（活动状态？）时旋转，但我似乎也无法弄清楚。

这是我正在使用的 css、html 和 javascript：

var acc = document.getElementsByClassName("disclosureBtn");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var disclosureContent = this.nextElementSibling;
    if (disclosureContent.style.display === "block") {
      disclosureContent.style.display = "none";
    } else {
      disclosureContent.style.display = "block";
    }
  });
}

.specialContainer {
  display: flex;
  flex-direction: row;
  gap: 0.35em 0.35em;
  max-width: 1345px;
  flex-wrap: wrap;
  background-color: transparent;
  margin: 0.35em auto 0em auto;
  padding: 0rem 0rem 0rem 0rem;
}

.specialContainer>div {
  background-color: #E7E6E6;
  position: relative;
  max-width: 1345px;
  text-align: center;
  outline: 1px solid black;
  float: left;
  width: calc(50% - 0.25em);
  height: auto;
  margin: 0em auto 0em auto;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.6);
}

.disclosureContainer {
  display: block;
  width: 100%;
  height: auto;
  background-color: #E7E6E6;
  text-align: center;
  padding: 0em 0em 0em 0em;
  margin: 0em 0em 0em 0em;
}

.disclosureContent {
  font-family: Oswald Regular, Univers, Helvetica Neue, Helvetica, Arial;
  color: #646464;
  background: #E7E6E6;
  display: none;
  font-size: 0.6rem;
  line-height: 0.8rem;
  text-align: justify;
  font-weight: 400;
  text-justify: inter-word;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0em 0.55em 0.1em 0.55em;
}

.disclosureBtn {
  background-color: transparent;
  border: none;
  border-collapse: collapse;
  width: 100%;
  height: 18px;
  display: block;
  margin: 0em auto 0em auto;
  padding: 0em 0em 0em 0em;
  cursor: pointer;
  text-decoration: none;
  transform: translateY(-5px);
}

.disclosureBtnTxt {
  font-family: Oswald Regular, Univers, Helvetica Neue, Helvetica, Arial;
  font-weight: 400;
  display: inline-block;
  color: #646464;
  padding: 0em 0em 0em 0em;
  margin: 0em auto 0em auto;
  text-align: center;
  text-decoration: none;
  font-size: 0.5rem;
  line-height: 0.8rem;
  letter-spacing: 0.01rem;
  cursor: pointer;
}

.fa-chevron-right {
  color: #646464;
  display: inline-block;
  font-size: 0.5rem;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0rem 0rem 0rem;
  transition: 0.2s all;
}

.disclosureContent:active .fa-chevron-right {
  transform: rotate(90deg);
  transition: 0.2s all;
}

<div class="specialContainer">
  <div class="row">
    Offer Container 1
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
    </section>
  </div>
  <div class="row">
    Offer Container 2
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore m`agna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </section>
  </div>
  <div class="row">
    Offer Container 3
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </section>
  </div>
  <div class="row">
    Offer Container 4
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </section>
  </div>
</div>

这是一个包含所有内容的 JS fiddle：

https://jsfiddle.net/30j5Loky/102/

Answer 1

您需要将 position: relative; 应用到容器。然后将 position: absolute 应用于内容，并将其与 top: 100% 和正数 z-index 组合，让它扩展到底部，而不用自行调整元素的大小。

PS：我缩短了您的 JS 代码并删除了 if/else 语句。我将其替换为 classList.toggle 函数并通过 CSS 应用更改。使代码更短并消除潜在的特异性权重问题。你应该避免在 2022 年使用 .style 功能。

var acc = document.getElementsByClassName("disclosureBtn");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var disclosureContent = this.nextElementSibling;
    disclosureContent.classList.toggle("d-block");
  });
}

.disclosureContainer {
  position: relative;
}

.disclosureContent {
  position: absolute;
  top: 100%;
  z-index: 1;
}


/* original CSS */
.specialContainer {
  display: flex;
  flex-direction: row;
  gap: 0.35em 0.35em;
  max-width: 1345px;
  flex-wrap: wrap;
  background-color: transparent;
  margin: 0.35em auto 0em auto;
  padding: 0rem 0rem 0rem 0rem;
}

.specialContainer>div {
  background-color: #E7E6E6;
  position: relative;
  max-width: 1345px;
  text-align: center;
  outline: 1px solid black;
  float: left;
  width: calc(50% - 0.25em);
  height: auto;
  margin: 0em auto 0em auto;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.6);
}

.disclosureContainer {
  display: block;
  width: 100%;
  height: auto;
  background-color: #E7E6E6;
  text-align: center;
  padding: 0em 0em 0em 0em;
  margin: 0em 0em 0em 0em;
}

.disclosureContent {
  font-family: Oswald Regular, Univers, Helvetica Neue, Helvetica, Arial;
  color: #646464;
  background: #E7E6E6;
  display: none;
  font-size: 0.6rem;
  line-height: 0.8rem;
  text-align: justify;
  font-weight: 400;
  text-justify: inter-word;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0em 0.55em 0.1em 0.55em;
}

.disclosureBtn {
  background-color: transparent;
  border: none;
  border-collapse: collapse;
  width: 100%;
  height: 18px;
  display: block;
  margin: 0em auto 0em auto;
  padding: 0em 0em 0em 0em;
  cursor: pointer;
  text-decoration: none;
  transform: translateY(-5px);
}

.disclosureBtnTxt {
  font-family: Oswald Regular, Univers, Helvetica Neue, Helvetica, Arial;
  font-weight: 400;
  display: inline-block;
  color: #646464;
  padding: 0em 0em 0em 0em;
  margin: 0em auto 0em auto;
  text-align: center;
  text-decoration: none;
  font-size: 0.5rem;
  line-height: 0.8rem;
  letter-spacing: 0.01rem;
  cursor: pointer;
}

.fa-chevron-right {
  color: #646464;
  display: inline-block;
  font-size: 0.5rem;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0rem 0rem 0rem;
  transition: 0.2s all;
}

.disclosureContent:active .fa-chevron-right {
  transform: rotate(90deg);
  transition: 0.2s all;
}


/* improvement for JS */
.d-block {
  display: block;
}

<div class="specialContainer">
  <div class="row">
    Offer Container 1
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
    </section>
  </div>
  <div class="row">
    Offer Container 2
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore m`agna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </section>
  </div>
  <div class="row">
    Offer Container 3
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </section>
  </div>
  <div class="row">
    Offer Container 4
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </section>
  </div>
</div>

Answer 2

我明白了。我只需要将 align-items: flex-start; 添加到父容器，这就产生了预期的效果：jsfiddle.net/9eg4rkoz

当隐藏部分打开时，如何防止弹性列扩展？

How can I keep flex columns from expanding when hidden section opened?

html

javascript

css

flexbox