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 属性同步更新。