如何解决双手风琴中的 maxHeight？
How do I resolve maxHeight in double accordion?
我有两个手风琴一个在另一个里面：主要的是一个类别，第二个是 question/answer 对。
我的问题是，当我单击一个问题时，类别的整体 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";
}
}
}
提前感谢您的帮助！
而不是使用高度 属性。使用 display 属性。在 null 和块之间切换显示 属性 将解决此问题。 （删除height:0）
你试过overflow: scroll; 属性 在你的 css 中？
如果没有，那么您可以选择这样做。
但是如果你非常想将元素向下推，那么你必须使用 min-height 来代替。 max-height 只会隐藏没有用处的元素。
使用
overflow: scroll;
或
min-height: 'x'px;
您必须为每个打开的 question 计算 category_content 的 max-height。所以我修改了你打开问题的代码。
您可以在本问题的末尾查看基于您的代码的工作示例。
我做了什么
在您设置问题内容高度之前：
content2.style.maxHeight = content2.scrollHeight + "px";
获取parent类别内容到变量中：
const parent = content2.closest(".category_content");
获取它的高度（我使用 parseInt() 获取“305”而不是“305px”）并将其与问题内容高度相加：
const parentHeight = parseInt(parent.style.maxHeight) + content2.scrollHeight;
之后应用新高度（parent + children 高度）：
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 -->
我有两个手风琴一个在另一个里面：主要的是一个类别，第二个是 question/answer 对。
我的问题是，当我单击一个问题时，类别的整体 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";
}
}
}
提前感谢您的帮助！
而不是使用高度 属性。使用 display 属性。在 null 和块之间切换显示 属性 将解决此问题。 （删除height:0）
你试过overflow: scroll; 属性 在你的 css 中？ 如果没有，那么您可以选择这样做。 但是如果你非常想将元素向下推，那么你必须使用 min-height 来代替。 max-height 只会隐藏没有用处的元素。
使用
overflow: scroll;
或
min-height: 'x'px;
您必须为每个打开的 question 计算 category_content 的 max-height。所以我修改了你打开问题的代码。
您可以在本问题的末尾查看基于您的代码的工作示例。
我做了什么
在您设置问题内容高度之前：
content2.style.maxHeight = content2.scrollHeight + "px";
获取parent类别内容到变量中：
const parent = content2.closest(".category_content");
获取它的高度（我使用 parseInt() 获取“305”而不是“305px”）并将其与问题内容高度相加：
const parentHeight = parseInt(parent.style.maxHeight) + content2.scrollHeight;
之后应用新高度（parent + children 高度）：
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 -->