js点击实现隐藏
使用 style.display 属性隐藏元素
通过修改元素的 style.display 属性为 "none" 可以隐藏元素。点击事件触发后，元素会从 DOM 中消失，不占据布局空间。
document.getElementById('targetElement').addEventListener('click', function() {
this.style.display = 'none';
});使用 style.visibility 属性隐藏元素
设置 style.visibility 为 "hidden" 会隐藏元素，但元素仍占据布局空间。适合需要保留占位的场景。
document.getElementById('targetElement').addEventListener('click', function() {
this.style.visibility = 'hidden';
});通过 CSS 类切换实现隐藏
预定义 CSS 类（如 .hidden）控制隐藏行为，通过 JavaScript 动态切换类名。
CSS 定义：
.hidden {
display: none;
}JavaScript 实现：
document.getElementById('targetElement').addEventListener('click', function() {
this.classList.add('hidden');
});使用 jQuery 隐藏元素
如果项目中已引入 jQuery，可通过 hide() 方法快速实现隐藏。
$('#targetElement').click(function() {
$(this).hide();
});隐藏后重新显示的补充方法
若需恢复显示，对应上述方法的反向操作：
display: none→ 设为"block"或原始值（如"inline"）。visibility: hidden→ 设为"visible"。- CSS 类切换 → 调用
classList.remove('hidden')。 - jQuery → 使用
show()方法。
// 示例：恢复 display 的显示
document.getElementById('showButton').addEventListener('click', function() {
document.getElementById('targetElement').style.display = 'block';
});注意事项
- 事件委托：动态生成的元素需通过事件委托绑定点击事件。
- 性能：频繁操作 DOM 可能影响性能，建议合并操作或使用文档片段。
- 无障碍：隐藏内容可能影响屏幕阅读器用户，需通过
aria-hidden属性补充语义。
