如何解决双手风琴中的maxHeight？ 我做了什么

编程问答 2022-06-08

问题描述

我有两个手风琴，另一个在里面：主要的是一类，第二个是一个问题/答案对。

我的问题是，当我单击一个问题时，类别的总体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";
    }
  }
}

预先感谢您的帮助！

解决方法

而不是使用height属性。使用display属性。在null和block之间切换显示属性将解决此问题。 （删除高度：0）

,

您是否尝试了溢出： CSS中的属性？ 如果没有，那么您可以选择这样做。 但是，如果您迫切希望将元素向下推，则必须改用min-height。 max-height只会隐藏没有用的元素。

使用

overflow: scroll;

或

min-height: 'x'px;
,

您必须为每个打开的max-height计算category_content中的question。因此，我修改了您打开问题的代码段。 您可以在此问题的末尾看到基于您的代码的工作示例。

我做了什么

在设置问题内容的高度之前：
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,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,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.
          </p>
        </dd>

      </div>
      </dl>
    </div>
    <!-- accordion ends here -->

accordionheightheightjavascript