当前位置：首页 > JavaScript

js实现点击显示隐藏

2026-01-30 15:20:53JavaScript

使用classList切换显示隐藏

通过JavaScript的classList属性添加或移除CSS类来控制元素的显示与隐藏。定义一个CSS类如.hidden { display: none; }，通过以下代码切换：

const element = document.getElementById('targetElement');
element.classList.toggle('hidden');

直接修改style属性

动态修改元素的style.display属性实现即时显示或隐藏。适用于无需预定义CSS类的情况：

js实现点击显示隐藏

const button = document.getElementById('toggleButton');
const content = document.getElementById('content');

button.addEventListener('click', () => {
  if (content.style.display === 'none') {
    content.style.display = 'block';
  } else {
    content.style.display = 'none';
  }
});

使用data-*属性存储状态

结合HTML5的data-*属性记录当前状态，增强代码可读性：

js实现点击显示隐藏

document.querySelector('[data-toggle]').addEventListener('click', (e) => {
  const targetId = e.target.getAttribute('data-target');
  const target = document.getElementById(targetId);
  const isHidden = target.getAttribute('data-hidden') === 'true';

  target.style.display = isHidden ? 'block' : 'none';
  target.setAttribute('data-hidden', String(!isHidden));
});

淡入淡出动画效果

通过CSS过渡和透明度变化实现平滑的显示隐藏效果：

function fadeToggle(element) {
  element.style.transition = 'opacity 0.3s';
  const isVisible = window.getComputedStyle(element).opacity === '1';
  element.style.opacity = isVisible ? '0' : '1';
  element.style.pointerEvents = isVisible ? 'none' : 'auto';
}

多元素联动控制

批量控制多个元素的显示状态，常用于菜单或标签页切换：

document.querySelectorAll('.toggle-group').forEach(trigger => {
  trigger.addEventListener('click', () => {
    const targetClass = trigger.dataset.toggleClass;
    document.querySelectorAll(`.${targetClass}`).forEach(item => {
      item.classList.toggle('active');
    });
  });
});