当前位置：首页 > JavaScript

js 实现 slidetoggle

2026-03-15 05:26:29JavaScript

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);
});