在JavaScript中实现内容的收缩与展开效果,通常涉及到DOM操作和事件监听。以下是一个基础的实现示例,包括HTML结构、CSS样式和JavaScript逻辑。
<div class="content">
<button class="toggle-btn">显示更多</button>
<div class="extra-content" style="display: none;">
这里是额外的内容,点击按钮可以展开或收缩这部分内容。
</div>
</div>
.content {
margin: 20px;
}
.toggle-btn {
padding: 10px;
cursor: pointer;
}
.extra-content {
padding: 10px;
border: 1px solid #ccc;
}
document.addEventListener('DOMContentLoaded', function() {
var toggleBtn = document.querySelector('.toggle-btn');
var extraContent = document.querySelector('.extra-content');
toggleBtn.addEventListener('click', function() {
if (extraContent.style.display === 'none') {
extraContent.style.display = 'block';
toggleBtn.textContent = '收缩内容';
} else {
extraContent.style.display = 'none';
toggleBtn.textContent = '显示更多';
}
});
});
addEventListener
方法来监听用户的点击事件,并执行相应的逻辑。通过上述方法,可以实现一个简单而有效的收缩与展开效果,同时考虑到用户体验和性能优化。
没有搜到相关的文章