我試圖在我的 HTML 頁面中添加手風琴它根本不起作用。我不確定我是否正在集成正確版本的 js (jquery-3.6.0.min.js) 我應該匯入其他東西我無法弄清楚。這是我的代碼:
索引.html
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
索引.js
var acc = document.getElementsByClassName("accordion");
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";
}
});
}
另外,我一步一步地跟著這個W3S 頁面找不到任何問題,但仍然無法正常作業。提前致謝。
uj5u.com熱心網友回復:
這很W3Schools的-如何- Collapsibles /手風琴不會正常作業,如果你不分配最大高度到<div >:
CSS:
.panel {
max-height: 0;
}
uj5u.com熱心網友回復:
如果您使用 jQuery(就像您提到的那樣),則可以使用該.slideToggle方法(https://api.jquery.com/slidetoggle/)。這是一個示例,它也使用了一些其他方便的 jQuery 方法:
$(".accordion").click(function() {
$(this).next().slideToggle();
});
這是 CodePen 的一個作業示例:https ://codepen.io/andyranged/pen/16a51bb5f076bf2348023c000ce7ded0
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/340544.html
標籤:javascript html 查询
