最近搜索
没有最近搜索

Krisztian Gyuris
已加入2024年7月10日
·
最后活动2024年7月10日
关注
1
关注者
0
活动总数
3
投票
1
订阅
1
活动概览
标记
文章
帖子
社区评论
文章评论
活动概览
的最新活动 Krisztian Gyuris
Krisztian Gyuris 进行了评论,
Yes, it is possible. Here is the modified code that closes the currently open accordion automatically once a new one is clicked:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
let activeAccordions = document.querySelectorAll(".accordion-div .accordion.active");
for (let j = 0; j < activeAccordions.length; j++) {
activeAccordions[j].classList.remove("active");
activeAccordions[j].nextElementSibling.style.maxHeight = null;
}
var panel = this.nextElementSibling;
if (!this.classList.contains("active")) {
this.classList.add("active");
panel.style.maxHeight = panel.scrollHeight + "px";
} else {
this.classList.remove("active");
panel.style.maxHeight = null;
}
});
}
So when the accordion is clicked, I try first to find all currently active accordions, remove the active class, and reset the maxHeight of the panel. Then check the current panel to see if it is active and if not, the active class is added, and changing the maxHeight to scrollHeight.
I also created a sandbox to demo the component:
https://codesandbox.io/p/sandbox/friendly-julien-tvc882
查看评论 · 已于 2024年7月10日 发布 · Krisztian Gyuris
0
关注者
0
投票
0
评论