js点击实现隐藏
使用 style.display 控制显示与隐藏
通过修改元素的 display 属性实现隐藏和显示切换。
document.getElementById('elementId').addEventListener('click', function() {
const element = document.getElementById('targetElement');
element.style.display = element.style.display === 'none' ? 'block' : 'none';
});适用于需要完全移除元素占位的场景。
使用 classList.toggle 切换 CSS 类
通过 CSS 类控制隐藏状态，保持逻辑与样式分离。
CSS 部分：
.hidden {
display: none;
}JavaScript 部分：
document.getElementById('elementId').addEventListener('click', function() {
document.getElementById('targetElement').classList.toggle('hidden');
});适合需要复用隐藏样式或添加动画效果的场景。
使用 visibility 属性隐藏元素
隐藏元素但保留其占位空间：
document.getElementById('elementId').addEventListener('click', function() {
const element = document.getElementById('targetElement');
element.style.visibility = element.style.visibility === 'hidden' ? 'visible' : 'hidden';
});适用于需要保持页面布局稳定的情况。
结合动画效果淡入淡出
通过透明度过渡实现平滑隐藏：
CSS 部分：
.fade {
opacity: 0;
transition: opacity 0.5s;
}JavaScript 部分：
document.getElementById('elementId').addEventListener('click', function() {
const element = document.getElementById('targetElement');
element.classList.toggle('fade');
});适合需要提升用户体验的动态效果。
注意事项
- 事件委托：动态生成的元素需通过事件委托绑定点击事件。
- 性能：频繁操作 DOM 时建议使用
classList而非直接修改style。 - 兼容性：现代浏览器均支持上述方法，无需额外 polyfill。
