如何解决双手风琴中的 maxHeight？

Question

我有两个手风琴，一个放在另一个里面：主要的一个是类别，第二个是问题/答案对。我的问题是，当我单击一个问题时，类别的整体 maxHeight 与以前相同，迫使我的问答对溢出，而不是添加到类别的 maxHeight。我对 Js 很陌生，所以我很难理解我所缺少的东西。我所有摆弄 js 代码的尝试都失败了。这是我正在处理的代码笔：https://codepen.io/iuliard/pen/KKMzMLe////ACCORDION////var accordions1 = document.getElementsByClassName("category_name");for (var i = 0; i < accordions1.length; i++) {  accordions1[i].onclick = function() {    this.classList.toggle('is-open');    var content1 = this.nextElementSibling;    if (content1.style.maxHeight) {      // accordion is currently open, so close it      content1.style.maxHeight = null;    } else {      // accordion is currently closed, so open it      content1.style.maxHeight = content1.scrollHeight + "px";    }  }}var accordions2 = document.getElementsByClassName("question");for (var i = 0; i < accordions2.length; i++) {  accordions2[i].onclick = function() {    this.classList.toggle('is-open');    var content2 = this.nextElementSibling;    if (content2.style.maxHeight) {      // accordion is currently open, so close it      content2.style.maxHeight = null;    } else {      // accordion is currently closed, so open it      content2.style.maxHeight = content2.scrollHeight + "px";    }  }}

Answer 1

您必须计算每个打开max-height的。所以我修改了你打开问题的代码。您可以在此问题的末尾查看基于您的代码的工作示例。category_contentquestion

我做了什么

在设置问题内容的高度之前：
content2.style.maxHeight = content2.scrollHeight + "px";
将父类别内容放入变量中：
const parent = content2.closest(".category_content");
获取其高度（我使用 parseInt() 获取“305”而不是“305 px ”）并将其与问题内容高度相加：
const parentHeight = parseInt(parent.style.maxHeight) + content2.scrollHeight;
之后应用新高度（父母+孩子身高）：
parent.style.maxHeight = parentHeight + "px"; 我们开始吧。

这只是向您指出正确解决方案的示例

var accordions1 = document.getElementsByClassName("category_name");

for (var i = 0; i < accordions1.length; i++) {

  accordions1[i].onclick = function() {

    this.classList.toggle('is-open');

    var content1 = this.nextElementSibling;

    if (content1.style.maxHeight) {

      // accordion is currently open, so close it

      content1.style.maxHeight = null;

    } else {

      // accordion is currently closed, so open it

      content1.style.maxHeight = content1.scrollHeight + "px";

    }

  }

}

var accordions2 = document.getElementsByClassName("question");

for (var i = 0; i < accordions2.length; i++) {

  accordions2[i].onclick = function() {

    this.classList.toggle('is-open');

    var content2 = this.nextElementSibling;

    if (content2.style.maxHeight) {

      // accordion is currently open, so close it

      content2.style.maxHeight = null;

    } else {

      // ↓↓↓ this is what I've modified ↓↓↓

      const parent = content2.closest(".category_content");

      const parentHeight = parseInt(parent.style.maxHeight) + content2.scrollHeight;

      parent.style.maxHeight = parentHeight + "px";

      // accordion is currently closed, so open it

      content2.style.maxHeight = content2.scrollHeight + "px";

    }

  }

}

@import url("https://rsms.me/inter/inter.css");

html {

  font-family: "Inter", sans-serif;

}

@supports (font-variation-settings: normal) {

  html {

    font-family: "Inter var", sans-serif;

  }

}

body {

  background: orange;

}

/* ACCORDION  */

.container {

  max-width: 100%;

  padding: 0px 35px;

}

.category {

  padding-top: 25px;

}

/* category name */

dl h3 {

  font-family: "Inter";

  font-weight: 500;

  font-size: 18px;

  text-align: left;

  text-transform: uppercase;

  padding-bottom: 20px;

  border-bottom: 1px solid black;

  line-height: 1.7;

  cursor: pointer;

  transition: 0.2s linear;

}

dl h3:hover {

  transform: translateX(3px);

}

/* question */

dt h4 {

  display: flex;

  order: 2;

  max-width: 50%;

  font-size: 16px;

  font-weight: 400;

  line-height: 180%;

}

/* answer */

dd p {

  font-family: "Inter";

  font-size: 16px;

  max-width: 75ch;

  line-height: 180%;

  padding-left: 29px;

  padding-bottom: 20px;

  font-weight: 400;

}

a {

  color: black;

}

.category_content {

  background-color: orange;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.3s ease-in-out;

}

dd.answer {

  background-color: orange;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.3s ease-in-out;

  border-bottom: 1px dashed black;

}

dt.question {

  display: inline-flex;

  cursor: pointer;

  padding: 15px 0px;

  font-family: "Inter";

  font-weight: 400;

  font-size: 16px;

  transition: transform 0.2s linear;

  line-height: 150%;

  width: 100%;

}

/* arrow  */

dt.question:after {

  content: "\f055";

  font-family: "fontawesome";

  margin-right: 12px;

  padding-top: 3px;

}

@-moz-document url-prefix() {

  dt.question:after {

    margin-top: 0px;

  }

}

dt.question.is-open:after {

  content: "\f056";

}

dt.question:hover,

dt.question.is-open {

  transform: translateX(5px);

}

    <!-- accordion starts here -->

    <div class="container">

      <dl class="category">

        <h3 class="category_name">Lorem</h3>

<div class="category_content">

        <dt class="question"><h4>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium?</h4></dt>

        <dd class="answer">

          <p>

            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>

        </dd>

        <dt class="question"><h4>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam?</h4></dt>

        <dd class="answer">

          <p>

            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non.

          </p>

        </dd>

        <dt class="question"><h4>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4></dt>

        <dd class="answer">

          <p>

            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>

        </dd>

      </div>

      </dl>

          <dl class="category">

        <h3 class="category_name">Lorem2</h3>

<div class="category_content">

        <dt class="question"><h4>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium?</h4></dt>

        <dd class="answer">

          <p>

            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam.

          </p>

        </dd>

        <dt class="question"><h4>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam?</h4></dt>

        <dd class="answer">

          <p>

            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

          </p>

        </dd>

        <dt class="question"><h4>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4></dt>

        <dd class="answer">

          <p>

            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

          </p>

        </dd>

      </div>

      </dl>

    </div>

    <!-- accordion ends here -->