js实现点击显示隐藏

使用 classList.toggle 方法

通过 classList.toggle 方法可以轻松切换元素的显示和隐藏状态。该方法会自动检查元素是否包含指定的类名，如果存在则移除，不存在则添加。

const button = document.querySelector('.toggle-button');
const element = document.querySelector('.element-to-toggle');

button.addEventListener('click', () => {
  element.classList.toggle('hidden');
});

对应的 CSS 样式：

.hidden {
  display: none;
}

使用 style.display 属性

直接操作元素的 style.display 属性可以实现更灵活的显示隐藏控制。这种方式不需要预先定义 CSS 类。

const button = document.querySelector('.toggle-button');
const element = document.querySelector('.element-to-toggle');

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

使用 jQuery 的 toggle 方法

如果项目中使用了 jQuery 库，可以使用其内置的 toggle 方法简化代码。jQuery 的 toggle 方法会自动处理元素的显示状态切换。

$('.toggle-button').click(function() {
  $('.element-to-toggle').toggle();
});

使用 aria-hidden 属性增强可访问性

为了提升可访问性，可以结合 aria-hidden 属性来控制元素的显示隐藏。这种方法对屏幕阅读器等辅助技术更友好。

const button = document.querySelector('.toggle-button');
const element = document.querySelector('.element-to-toggle');

button.addEventListener('click', () => {
  const isHidden = element.getAttribute('aria-hidden') === 'true';
  element.setAttribute('aria-hidden', !isHidden);
  element.style.display = isHidden ? 'block' : 'none';
});

动画效果实现

如果需要平滑的过渡效果，可以使用 CSS transition 配合 max-height 或 opacity 属性。

const button = document.querySelector('.toggle-button');
const element = document.querySelector('.element-to-toggle');

button.addEventListener('click', () => {
  if (element.style.maxHeight) {
    element.style.maxHeight = null;
  } else {
    element.style.maxHeight = element.scrollHeight + 'px';
  }
});

对应的 CSS 样式：

.element-to-toggle {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}