手风琴效果是一种常见的网页交互效果,它允许用户通过点击或悬停在一个元素上展开或折叠内容区域。以下是一个简单的JavaScript实现手风琴效果的示例代码:
<div class="accordion">
<div class="accordion-item">
<button class="accordion-header">Section 1</button>
<div class="accordion-content">
Content for section 1 goes here.
</div>
</div>
<div class="accordion-item">
<button class="accordion-header">Section 2</button>
<div class="accordion-content">
Content for section 2 goes here.
</div>
</div>
<div class="accordion-item">
<button class="accordion-header">Section 3</button>
<div class="accordion-content">
Content for section 3 goes here.
</div>
</div>
</div>
.accordion-content {
display: none;
padding: 10px;
border: 1px solid #ccc;
}
.accordion-content.active {
display: block;
}
document.addEventListener('DOMContentLoaded', function() {
const accordionHeaders = document.querySelectorAll('.accordion-header');
accordionHeaders.forEach(header => {
header.addEventListener('click', function() {
const content = this.nextElementSibling;
content.classList.toggle('active');
});
});
});
.accordion-header
)和一个内容区域(.accordion-content
)。display: none
)。当内容区域添加了.active
类时,它会显示出来(display: block
)。DOMContentLoaded
事件确保DOM完全加载后再执行脚本。.accordion-header
按钮,并为每个按钮添加点击事件监听器。.active
类,从而实现展开和折叠的效果。手风琴效果常用于以下场景:
.active
类的display
属性设置为block
。.active
类。.active
类,再为当前点击的内容区域添加。accordionHeaders.forEach(header => {
header.addEventListener('click', function() {
const content = this.nextElementSibling;
document.querySelectorAll('.accordion-content').forEach(el => el.classList.remove('active'));
content.classList.add('active');
});
});
通过以上代码和解释,你应该能够实现一个基本的手风琴效果,并理解其工作原理和应用场景。
领取专属 10元无门槛券
手把手带您无忧上云