当前位置：首页 > JavaScript

js 实现折叠

2026-04-06 02:34:15JavaScript

实现折叠效果的方法

使用HTML和CSS结合JavaScript实现折叠

通过HTML结构定义折叠区域，CSS控制初始状态，JavaScript处理交互逻辑。

<div class="fold-container">
  <button class="fold-button">点击折叠/展开</button>
  <div class="fold-content">
    <p>这里是需要折叠显示的内容</p>
  </div>
</div>

.fold-content {
  display: none;
  padding: 10px;
  border: 1px solid #ddd;
}

.fold-content.show {
  display: block;
}

document.querySelector('.fold-button').addEventListener('click', function() {
  document.querySelector('.fold-content').classList.toggle('show');
});

使用jQuery简化实现

jQuery提供了更简洁的语法来实现折叠效果。

$('.fold-button').click(function() {
  $('.fold-content').toggle();
});

使用CSS过渡动画增强体验

为折叠效果添加平滑的过渡动画。

js 实现折叠

.fold-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.fold-content.show {
  max-height: 500px;
}

多元素折叠控制

实现多个独立折叠区域

为每个折叠区域分配独立的控制按钮。

document.querySelectorAll('.fold-button').forEach(button => {
  button.addEventListener('click', function() {
    this.nextElementSibling.classList.toggle('show');
  });
});

手风琴式折叠效果

确保每次只展开一个折叠区域。

js 实现折叠

document.querySelectorAll('.fold-button').forEach(button => {
  button.addEventListener('click', function() {
    const content = this.nextElementSibling;
    document.querySelectorAll('.fold-content').forEach(item => {
      if (item !== content) item.classList.remove('show');
    });
    content.classList.toggle('show');
  });
});

高级折叠功能

保存折叠状态

使用localStorage保存用户的折叠偏好。

document.querySelector('.fold-button').addEventListener('click', function() {
  const content = document.querySelector('.fold-content');
  content.classList.toggle('show');
  localStorage.setItem('foldState', content.classList.contains('show'));
});

// 页面加载时恢复状态
window.addEventListener('load', function() {
  const savedState = localStorage.getItem('foldState') === 'true';
  document.querySelector('.fold-content').classList.toggle('show', savedState);
});

响应式折叠

根据屏幕尺寸自动调整折叠行为。

function handleResize() {
  const content = document.querySelector('.fold-content');
  if (window.innerWidth < 768) {
    content.classList.remove('show');
  } else {
    content.classList.add('show');
  }
}

window.addEventListener('resize', handleResize);
handleResize();