js实现显示隐藏

使用CSS类切换实现显示隐藏

通过添加或移除CSS类来控制元素的显示和隐藏。定义一个隐藏样式类，利用JavaScript切换该类。

.hidden {
  display: none;
}

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

直接修改style属性

通过JavaScript直接修改元素的display样式属性，适用于简单场景。

const element = document.getElementById('target');
element.style.display = element.style.display === 'none' ? 'block' : 'none';

淡入淡出效果

结合CSS过渡和透明度实现平滑的淡入淡出效果。

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

const element = document.getElementById('target');
element.classList.toggle('fade');
element.classList.toggle('show');

滑动效果

通过高度变化实现滑动显示/隐藏效果，需配合CSS过渡。

.slide {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.slide.open {
  max-height: 500px; /* 设置为足够大的值 */
}

const element = document.getElementById('target');
element.classList.toggle('slide');
element.classList.toggle('open');

使用jQuery实现

如果项目中已引入jQuery库，可以简化操作。

$('#target').toggle(); // 基础显示/隐藏
$('#target').fadeToggle(); // 淡入淡出
$('#target').slideToggle(); // 滑动效果

性能优化建议

对于频繁操作的DOM元素，建议先将元素引用存储在变量中。动画效果应尽量使用CSS实现而非JavaScript，以获得更好的性能。