如何解决如何修复我的代码以将 Collapse All div 添加到 Vanilla JS Accordion?
我有使用 HTML 和 CSS 的经验,但我才刚刚开始学习 JS,所以我的代码可能反映了很多。我已经在我的网站中插入了一个 vanilla JS 手风琴,但我还想在页面上添加(最好是多个)Collapse-All 链接。这是我的手风琴 HTML、CSS 和 JS,改编自 W3Schools (https://www.w3schools.com/howto/howto_js_accordion.asp):
<h3 class="accordion">
***
</h3>
<div class="panel">
***
</div>
<h3 class="accordion">
***
</h3>
<div class="panel">
***
</div>
...
div.panel {
max-height: 0;
overflow: hidden;
transition: 0.5s ease-out;
}
var accordion = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < accordion.length; i++) {
accordion[i].addEventListener("click",function() {
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
以下是我自己尝试添加一个基于手风琴 JS 的折叠所有功能,据说是遍历我所有折叠所有链接的点击事件,然后遍历所有手风琴面板以查找和关闭所有面板开放的:
<div class="collapse">
Collapse All
</div>
...
<div class="collapse">
Collapse All
</div>
...
var collapse = document.getElementsByClassName("collapse");
var j;
for (j = 0; j < collapse.length; j++) {
collapse[j].addEventListener("click",function() {
var panelAll = document.getElementsByClassName("panel");
for (k = 0; k < panelAll.length; k++) {
if (panelAll.style.maxHeight) {
panelAll.style.maxHeight = null;
}
}
});
}
但是,在最终的 for 循环中的“if (panelAll.style.maxHeight)”行中,我收到控制台错误,因为 panelAll.style.maxHeight 未定义。这就是我卡住的地方,因为当 panelAll.style.maxHeight 为空/未定义时,我在原始 JS 中没有收到任何用于手风琴的控制台错误。我的问题是否有任何简单的解决方法,或者我是否需要重新编码整个手风琴 JS 以添加折叠所有功能(在这种情况下我可能会放弃它)?感谢您的任何意见。
解决方法
您应该尝试 public class Main {
public static void main(String[] args) {
int[] numbers = {1,2,3};
// prints 100,200,300
for(int i = 0; i < numbers.length; i++){
System.out.println(numbers[i]);
}
}
public static void change(int[] numbers) {
for(int i = 0; i < numbers.length; i++){
numbers[i] = numbers[i] * 100;
}
}
}
,因为 panelAll[k].style.maxHeight
是一个数组,因为 document.getElementsByClassName 返回一个集合。
也许这会有所帮助。
[...document.getElementsByClassName("accordion")].forEach(accordion => {
accordion.addEventListener("click",function() {
var panel = this.nextElementSibling;
panel.style.maxHeight = panel.style.maxHeight ? null : panel.scrollHeight + "px";
});
});
document.getElementById("collapseall").addEventListener("click",() => {
[...document.getElementsByClassName("accordion")].forEach(accordion => {
var panel = accordion.nextElementSibling;
panel.style.maxHeight = null;
});
});
div.panel {
max-height: 0;
overflow: hidden;
transition: 0.5s ease-out;
}
.accordion {
cursor: pointer;
}
<button id="collapseall" type="button">
Collapse All
</button>
<h3 class="accordion">
Accordion-1
</h3>
<div class="panel">
panel-11
</div>
<h3 class="accordion">
Accordion-2
</h3>
<div class="panel">
panel-2
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。