HTML 手風(fēng)琴效果是一種常見的網(wǎng)頁設(shè)計效果。它可以讓頁面中的內(nèi)容在用戶點擊時進行展開或收縮，使得頁面看起來更加整潔、美觀。下面我們來介紹一下如何實現(xiàn) HTML 手風(fēng)琴效果的代碼：
<html>
<head>
<title>HTML 手風(fēng)琴效果</title>
<style>
.accordion {
background-color: #f7f7f7;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.accordion h3 {
cursor: pointer;
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 10px;
background-color: #e7e7e7;
border-radius: 3px;
}
.accordion .content {
display: none;
padding: 10px;
}
</style>
</head>
<body>
<div class="accordion">
<h3>Section 1</h3>
<div class="content">
<p>This is the content of section 1.</p>
</div>
<h3>Section 2</h3>
<div class="content">
<p>This is the content of section 2.</p>
</div>
<h3>Section 3</h3>
<div class="content">
<p>This is the content of section 3.</p>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
</html>代碼中的關(guān)鍵部分是使用 CSS 實現(xiàn)了手風(fēng)琴效果的樣式，以及使用 JavaScript 實現(xiàn)了用戶點擊時展開或收縮內(nèi)容的功能。這個代碼對于 HTML 初學(xué)者來說比較易懂，可以通過修改內(nèi)容來擴展自己的頁面。