js点击实现隐藏
使用 style.display 属性切换隐藏
通过修改元素的 display 属性实现隐藏与显示。点击时检查当前状态，切换为 none（隐藏）或 block（显示）。
document.getElementById('target').addEventListener('click', function() {
const element = document.getElementById('elementToHide');
element.style.display = element.style.display === 'none' ? 'block' : 'none';
});使用 classList.toggle 控制 CSS 类
定义 CSS 类（如 .hidden）设置 display: none，通过 classList.toggle 动态添加/移除类。
.hidden { display: none; }document.getElementById('toggleButton').addEventListener('click', function() {
document.getElementById('content').classList.toggle('hidden');
});使用 visibility 属性保留布局
若需隐藏元素但保留其占位空间，可将 visibility 切换为 hidden 或 visible。
document.querySelector('.btn').addEventListener('click', function() {
const box = document.querySelector('.box');
box.style.visibility = box.style.visibility === 'hidden' ? 'visible' : 'hidden';
});动画效果过渡隐藏
结合 opacity 和 transition 实现淡出效果，通过定时器完全隐藏元素。
document.getElementById('fadeBtn').addEventListener('click', function() {
const div = document.getElementById('fadeDiv');
div.style.opacity = '0';
setTimeout(() => div.style.display = 'none', 300); // 匹配 CSS 过渡时间
});注意事项
- 若元素初始状态需隐藏，直接在 HTML 或 CSS 中设置
display: none。 - 频繁切换显示/隐藏时，使用
classList性能优于直接操作style。 - 屏幕阅读器可访问性可通过
aria-hidden属性同步更新。
