当前位置：首页 > JavaScript

js 实现伸缩

2026-02-01 03:44:05JavaScript

实现伸缩效果的方法

使用JavaScript实现伸缩效果可以通过多种方式完成，以下是几种常见的实现方法：

使用CSS transition和JavaScript控制高度

通过CSS定义过渡效果，JavaScript动态修改元素的高度或宽度。

.target-element {
  overflow: hidden;
  transition: height 0.3s ease;
}

const element = document.querySelector('.target-element');
element.addEventListener('click', function() {
  if (element.style.height === '0px' || !element.style.height) {
    element.style.height = element.scrollHeight + 'px';
  } else {
    element.style.height = '0px';
  }
});

使用classList切换类名

定义展开和收缩的CSS类，通过JavaScript切换类名实现动画效果。

.expand {
  height: auto;
  transition: height 0.3s ease;
}

.collapse {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

const element = document.querySelector('.target-element');
element.addEventListener('click', function() {
  element.classList.toggle('collapse');
  element.classList.toggle('expand');
});

使用jQuery的slideToggle方法

如果项目中使用了jQuery库，可以直接使用slideToggle方法实现伸缩效果。

$('.target-element').on('click', function() {
  $(this).slideToggle();
});

使用Web Animations API

现代浏览器支持Web Animations API，可以直接使用JavaScript创建动画。

const element = document.querySelector('.target-element');
element.addEventListener('click', function() {
  const isExpanded = element.getAttribute('data-expanded') === 'true';
  const startHeight = isExpanded ? element.scrollHeight : 0;
  const endHeight = isExpanded ? 0 : element.scrollHeight;

  element.animate(
    { height: [`${startHeight}px`, `${endHeight}px`] },
    { duration: 300, easing: 'ease-in-out' }
  ).onfinish = () => {
    element.style.height = isExpanded ? '0' : 'auto';
    element.setAttribute('data-expanded', String(!isExpanded));
  };
});