javascript - Javascript中的嵌套手风琴重叠
问题描述
我正在尝试使用 CSS、html 和 Javascript 创建一些嵌套的手风琴。一切都按预期工作,直到我尝试添加滑动动画,它们确实滑动,但现在 maxHeight 没有调整以考虑其中元素的高度,因此元素重叠并且无法正确看到.
我可以仅在按钮处于活动状态以实现所需结果时更新每个元素的 maxHeight 吗?如果可以,实现该目标的最佳方法是什么?
var buttonListLB = document.getElementsByClassName("button-lightblue");
var buttonListB = document.getElementsByClassName("button-blue");
var buttonListDB = document.getElementsByClassName("button-darkblue");
var i;
var j;
var k;
function openDropbox() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") { //The parent's status should be considered here
panel.style.display = "none";
panel.style.maxHeight = null;
} else {
panel.style.display = "block";
panel.style.maxHeight = (panel.scrollHeight) + "px";
}
}
for (i = 0; i < buttonListLB.length; i++) {
for (j = 0; j < buttonListB.length; j++) {
for (k = 0; k < buttonListDB.length; k++) {
buttonListDB[k].addEventListener("click", openDropbox);
}
buttonListB[j].addEventListener("click", openDropbox);
}
buttonListLB[i].addEventListener("click", openDropbox);
}
.column {
float: left;
width: 48%;
padding: 2px;
height: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
.button-lightblue {
background-color: #0287c5;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: 1px solid white;
border-radius: 6px;
text-align: left;
outline: none;
font-size: 15px;
font-family: Arial;
font-weight: bold;
}
.button-lightblue:after {
content: '⏵';
font-size: 12px;
font-family: Arial;
font-weight: normal;
color: white;
float: right;
margin-left: 2px;
}
.active,
.button-lightblue:hover {
background-color: #0085d8;
}
.active:after {
content: "⏷";
}
.button-blue {
background-color: #005aab;
color: white;
cursor: pointer;
padding: 16px;
width: 100%;
border: 2px solid white;
border-radius: 6px;
text-align: left;
outline: none;
font-size: 15px;
font-family: Arial;
font-weight: bold;
}
.button-blue:after {
content: '⏵';
font-size: 12px;
font-family: Arial;
font-weight: normal;
color: white;
float: right;
margin-left: 2px;
}
.active,
.button-blue:hover {
background-color: #0085d8;
}
.active:after {
content: "⏷";
}
.button-darkblue {
background-color: #003c71;
color: white;
cursor: pointer;
padding: 14px;
width: 100%;
border: 2px solid white;
border-radius: 6px;
text-align: left;
outline: none;
font-size: 15px;
font-family: Arial;
font-weight: bold;
}
.button-darkblue:after {
content: '⏵';
font-size: 12px;
font-family: Arial;
font-weight: normal;
color: white;
float: right;
margin-left: 2px;
}
.active,
.button-darkblue:hover {
background-color: #0085d8;
}
.active:after {
content: "⏷";
}
.button-link {
padding: 14px;
background-color: #f1f1f1;
height: 0;
color: black;
cursor: pointer;
text-align: left;
font-size: 12px;
font-family: Arial;
}
.accordion-content {
padding: 0 2px;
background-color: white;
max-height: 0;
font-family: Arial;
display: none;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.dropbox-content {
position: fixed;
padding: 0 2px;
background-color: #f1f1f1;
max-height: 0;
display: none;
width: 35%;
z-index: 1;
transition: max-height 0.2s ease-out;
}
.dropbox-content a {
color: #0085d8;
font-family: Arial;
transition: max-height 0.4s ease-out;
}
.dropbox-content font {
color: #0085d8;
font-family: Arial;
transition: max-height 0.4s ease-out;
}
.additional-content {
padding: 5px 5px;
display: block;
background-color: #003c71;
font-family: Arial;
color: white;
overflow: visible;
}
<div class="row">
<div class="column">
<button class="button-lightblue"> Top Button 1</button>
<div class="accordion-content">
<button class="button-blue"> Middle Button 1</button>
<div class="accordion-content">
<button class="button-darkblue"> Bottom Button 1</button>
<div class="accordion-content">
<font face="Arial">
<a href="" class="button-link" target="_blank">Dead Link</a>
</font>
</div>
<button class="button-darkblue"> Bottom Button 2</button>
<div class="accordion-content">
<font face="Arial">
<a href="" class="button-link" target="_blank">Dead Link</a>
</font>
</div>
</div>
<button class="button-blue"> Middle Button 2</button>
<div class="accordion-content">
<button class="button-darkblue"> Bottom Button 3</button>
<div class="accordion-content">
<font face="Arial">
<a href="" class="button-link" target="_blank">Dead Link</a>
</font>
</div>
<button class="button-darkblue"> Bottom Button 4</button>
<div class="accordion-content">
<font face="Arial">
<a href="" class="button-link" target="_blank">Dead Link</a>
</font>
</div>
</div>
</div>
</div>
</div>
运行上面的代码片段应该可以让问题变得非常清晰。我愿意接受任何建议,在此先感谢您。
编辑:我删除了我错误地留在脚本中的错误函数。
解决方案
推荐阅读
- c# - 如何将上传文件的路径添加到文本框中并将其存储在数据库中?
- jenkins-pipeline - 仅显示来自 Jenkins 管道的 Bitbucket 的最新构建状态
- css - Firefox 不支持最小高度
- machine-learning - 构建神经网络 - 传递网络作为参数在 keras 中不起作用
- python - 如何减少分叉进程以运行可执行文件的 Web 服务器的内存使用量?
- mysql - Google SQL Mysql 外部数据包装器错误连接另一个 Google SQL
- c# - 如果没有异常,是否可以有条件地执行语句?
- javascript - Cordova `touchend` 事件在 iOS 上的行为不同
- android - 调试和发布模式下是否有任何 multiDexEnabled 行为差异?
- vue.js - 刷新 vue-adal 的令牌