当前位置：首页 > JavaScript

js实现点击显示和隐藏

2026-04-03 19:36:01JavaScript

使用 classList.toggle 方法

通过 classList.toggle 方法可以切换元素的显示和隐藏状态。定义一个 CSS 类来控制元素的显示与隐藏：

.hidden {
  display: none;
}

JavaScript 部分通过事件监听器触发切换：

document.getElementById('toggleButton').addEventListener('click', function() {
  document.getElementById('targetElement').classList.toggle('hidden');
});

使用 style.display 属性

直接操作元素的 style.display 属性来实现显示和隐藏：

const button = document.getElementById('toggleButton');
const element = document.getElementById('targetElement');

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

使用 jQuery 的 toggle 方法

如果项目中使用了 jQuery，可以更简洁地实现：

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

动画效果的显示隐藏

通过添加过渡动画提升用户体验：

.fade {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fade.show {
  opacity: 1;
}

JavaScript 控制动画：

document.getElementById('toggleButton').addEventListener('click', function() {
  const element = document.getElementById('targetElement');
  element.classList.toggle('show');
});

多元素控制

同时控制多个元素的显示状态：

js实现点击显示和隐藏

document.getElementById('toggleButton').addEventListener('click', function() {
  const elements = document.querySelectorAll('.toggle-items');
  elements.forEach(el => {
    el.classList.toggle('hidden');
  });
});

每种方法适用于不同场景，classList.toggle 是最推荐的标准方法，兼顾简洁性和可维护性。动画版本适合需要平滑过渡的场景，而 jQuery 方法适合已使用该库的项目。

标签: js