当前位置：首页 > JavaScript

js实现点击显示隐藏

2026-03-01 06:24:19JavaScript

使用 classList.toggle 方法

通过 classList.toggle 方法切换元素的显示和隐藏状态。这种方法适合需要频繁切换显示状态的场景。

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

toggleButton.addEventListener('click', () => {
  content.classList.toggle('hidden');
});

对应的 CSS 样式：

.hidden {
  display: none;
}

使用 style.display 属性

直接修改元素的 style.display 属性来控制显示和隐藏。这种方法适合不需要保留初始样式的场景。

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

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

使用 jQuery 的 toggle 方法

如果项目中已经引入了 jQuery，可以使用其提供的 toggle 方法简化操作。

$('#toggleButton').click(function() {
  $('#content').toggle();
});

使用 data-* 属性存储状态

通过 data-* 属性来存储元素的当前状态，适合需要跟踪状态的复杂场景。

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

toggleButton.addEventListener('click', () => {
  const isHidden = toggleButton.dataset.hidden === 'true';
  content.style.display = isHidden ? 'block' : 'none';
  toggleButton.dataset.hidden = !isHidden;
});

动画效果实现

如果需要平滑的显示/隐藏过渡效果，可以结合 CSS transition 或 JavaScript 动画。

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

toggleButton.addEventListener('click', () => {
  content.style.transition = 'opacity 0.3s ease';
  if (content.style.opacity === '0') {
    content.style.opacity = '1';
    content.style.pointerEvents = 'auto';
  } else {
    content.style.opacity = '0';
    content.style.pointerEvents = 'none';
  }
});

对应的 CSS 样式：

js实现点击显示隐藏