js实现点击显示和隐藏
实现点击显示和隐藏的JavaScript方法
通过JavaScript实现元素的显示和隐藏，可以利用DOM操作和事件监听。以下是几种常见方法：
方法一：通过style.display切换
const toggleButton = document.getElementById('toggleButton');
const targetElement = document.getElementById('targetElement');
toggleButton.addEventListener('click', function() {
if (targetElement.style.display === 'none') {
targetElement.style.display = 'block';
} else {
targetElement.style.display = 'none';
}
});方法二：通过classList.toggle切换CSS类
HTML部分：
<button id="toggleButton">切换</button>
<div id="targetElement" class="hidden">可显示/隐藏的内容</div>CSS部分：
.hidden {
display: none;
}JavaScript部分：
document.getElementById('toggleButton').addEventListener('click', function() {
document.getElementById('targetElement').classList.toggle('hidden');
});方法三：使用jQuery简化操作
如果项目中已引入jQuery，可以更简洁地实现：
$('#toggleButton').click(function() {
$('#targetElement').toggle();
});方法四：通过visibility属性切换
与display不同，visibility隐藏元素时仍占据空间：
document.getElementById('toggleButton').addEventListener('click', function() {
const element = document.getElementById('targetElement');
element.style.visibility = element.style.visibility === 'hidden' ? 'visible' : 'hidden';
});注意事项
- 确保DOM加载完成后再绑定事件，可以将代码放在
window.onload或DOMContentLoaded事件中 - 如果元素初始状态为隐藏，建议直接在HTML或CSS中设置
display:none或相应的类 - 对于频繁切换的场景，CSS类切换的性能通常优于直接修改
style属性
扩展功能
实现带有动画效果的显示/隐藏：
document.getElementById('toggleButton').addEventListener('click', function() {
const element = document.getElementById('targetElement');
element.style.transition = 'all 0.3s ease';
element.style.height = element.style.height === '0px' ? 'auto' : '0px';
element.style.opacity = element.style.opacity === '0' ? '1' : '0';
});配合CSS：
#targetElement {
overflow: hidden;
transition: all 0.3s ease;
}
