您必須計算每個打開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 -->
