我为我的网站创建了一个子手风琴，但当我点击它时，文本不会出现。
我试图删除其他手风琴并修改js代码，但问题仍然存在。
我认为JavaScript代码中存在问题，因为主手风琴正在工作。
我找到了w3schools的教程。以下是链接：https://w3schools.com/howto/howto_js_accordion.asp
var acc = document.querySelectorAll('.accordion,.subaccordion');
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}.accordion {
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-family: Poppins;
font-size: 15px;
transition: 0.4s;
margin-top: .15rem;
background-color:#fafafa;
}
.subaccordion {
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-family: Poppins;
font-size: 15px;
transition: 0.4s;
margin-top: .15rem;
background-color:#fafafa;
}
.active, .accordion:hover, .subaccordion:hover {
background-color: #f0f0f0;
}
.accordion:after, .subaccordion:after {
content: ' 02B';
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "2212";
}
.panel {
padding: 0 18px;
background-color: white;
font-family: poppins;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.title {
font-family: Poppins;
}<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accordions</title>
<link rel="stylesheet" href="style.css"></link>
</head>
<body>
<h1 class="title">Accordions Test</h1>
<button class="accordion">Accordion 1</button>
<div class="panel">
<button class="subaccordion">Subaccordion 1</button>
<div class="panel">
<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>
</div>
</div>
<button class="accordion">Accordion 2</button>
<div class="panel">
<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>
</div>
</body>
<script src="script.js" charset="utf-8"></script>
</html>当您单击子手风琴时，来自maxHeight的问题仍然会影响到父节点
一个想法可以是等待面板上的转换结束，重新计算父上的最大高度
panel.addEventListener('transitionend', () => {
panel.parentNode.style.maxHeight = panel.parentNode.scrollHeight + "px";
});
[...document.querySelectorAll('.accordion, .subaccordion')].forEach(acc => {
acc.addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
});
[...document.querySelectorAll('.panel')].forEach(panel => {
panel.addEventListener('transitionend', () => {
panel.parentNode.style.maxHeight = panel.parentNode.scrollHeight + "px";
});
});.accordion {
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-family: Poppins;
font-size: 15px;
transition: 0.4s;
margin-top: .15rem;
background-color: #fafafa;
}
.subaccordion {
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-family: Poppins;
font-size: 15px;
transition: 0.4s;
margin-top: .15rem;
background-color: #fafafa;
}
.active,
.accordion:hover,
.subaccordion:hover {
background-color: #f0f0f0;
}
.accordion:after,
.subaccordion:after {
content: ' 02B';
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "2212";
}
.panel {
padding: 0 18px;
background-color: white;
font-family: poppins;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.title {
font-family: Poppins;
}<h1 class="title">Accordions Test</h1>
<button class="accordion">Accordion 1</button>
<div class="panel">
<button class="subaccordion">Subaccordion 1</button>
<div class="panel">
<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>
</div>
</div>
<button class="accordion">Accordion 2</button>
<div class="panel">
<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>
</div>