js 实现 slidetoggle

实现 SlideToggle 效果

使用原生 JavaScript 实现类似 jQuery 的 slideToggle 效果可以通过操作元素的 height 和 transition 属性来完成。以下是两种常见的实现方式：

使用 CSS Transition 实现

function slideToggle(element, duration = 300) {
  // 如果元素是隐藏的
  if (window.getComputedStyle(element).display === 'none') {
    element.style.display = 'block';
    const height = element.offsetHeight;
    element.style.height = '0';
    element.style.overflow = 'hidden';
    element.style.transition = `height ${duration}ms ease`;

    // 触发重绘
    void element.offsetHeight;

    element.style.height = `${height}px`;

    // 过渡结束后清除内联样式
    setTimeout(() => {
      element.style.height = '';
      element.style.overflow = '';
      element.style.transition = '';
    }, duration);
  } else {
    // 如果元素是显示的
    const height = element.offsetHeight;
    element.style.height = `${height}px`;
    element.style.overflow = 'hidden';
    element.style.transition = `height ${duration}ms ease`;

    // 触发重绘
    void element.offsetHeight;

    element.style.height = '0';

    // 过渡结束后隐藏元素
    setTimeout(() => {
      element.style.display = 'none';
      element.style.height = '';
      element.style.overflow = '';
      element.style.transition = '';
    }, duration);
  }
}

使用 requestAnimationFrame 实现

function slideToggle(element, duration = 300) {
  const startHeight = element.offsetHeight;
  const startTime = performance.now();

  if (window.getComputedStyle(element).display === 'none') {
    element.style.display = 'block';
    const endHeight = element.offsetHeight;
    element.style.height = '0';
    element.style.overflow = 'hidden';

    function animate(time) {
      const elapsed = time - startTime;
      const progress = Math.min(elapsed / duration, 1);
      const height = progress * endHeight;
      element.style.height = `${height}px`;

      if (progress < 1) {
        requestAnimationFrame(animate);
      } else {
        element.style.height = '';
        element.style.overflow = '';
      }
    }

    requestAnimationFrame(animate);
  } else {
    const endHeight = 0;
    element.style.overflow = 'hidden';

    function animate(time) {
      const elapsed = time - startTime;
      const progress = Math.min(elapsed / duration, 1);
      const height = startHeight - (progress * startHeight);
      element.style.height = `${height}px`;

      if (progress < 1) {
        requestAnimationFrame(animate);
      } else {
        element.style.display = 'none';
        element.style.height = '';
        element.style.overflow = '';
      }
    }

    requestAnimationFrame(animate);
  }
}

使用方法

const btn = document.getElementById('toggleBtn');
const content = document.getElementById('content');

btn.addEventListener('click', () => {
  slideToggle(content);
});

注意事项

• 确保元素初始状态正确（display: none 或 display: block）
• 过渡效果依赖于 CSS 的 transition 属性
• 使用 requestAnimationFrame 可以获得更流畅的动画效果
• 动画持续时间可以根据需要调整
• 元素需要有明确的高度，不能设置为 height: auto