当前位置：首页 > JavaScript

js 实现收缩

2026-03-14 19:11:07JavaScript

实现收缩效果的JavaScript方法

使用CSS和JavaScript结合

通过修改元素的display属性实现收缩效果。定义一个CSS类隐藏元素，用JavaScript切换该类。

.collapsed {
  display: none;
}

function toggleCollapse(elementId) {
  const element = document.getElementById(elementId);
  element.classList.toggle('collapsed');
}

使用高度动画

通过改变元素的height属性实现平滑的收缩动画效果。

js 实现收缩

function collapseWithAnimation(elementId) {
  const element = document.getElementById(elementId);
  if (element.style.height === '0px') {
    element.style.height = `${element.scrollHeight}px`;
  } else {
    element.style.height = '0px';
  }
}

使用jQuery实现

如果项目中已引入jQuery，可以使用其提供的动画方法。

js 实现收缩

$('#targetElement').slideUp(); // 收缩
$('#targetElement').slideDown(); // 展开
$('#targetElement').slideToggle(); // 切换状态

动态内容收缩

对于动态生成的内容，使用事件委托处理收缩逻辑。

document.addEventListener('click', (e) => {
  if (e.target.classList.contains('collapse-btn')) {
    const content = e.target.nextElementSibling;
    content.style.display = content.style.display === 'none' ? 'block' : 'none';
  }
});

响应式收缩

结合媒体查询实现响应式收缩效果，在不同屏幕尺寸下自动调整。

function responsiveCollapse() {
  const elements = document.querySelectorAll('.collapsible');
  const screenWidth = window.innerWidth;

  elements.forEach(el => {
    if (screenWidth < 768) {
      el.classList.add('collapsed');
    } else {
      el.classList.remove('collapsed');
    }
  });
}

window.addEventListener('resize', responsiveCollapse);