当前位置：首页 > JavaScript

js 实现折叠

2026-02-01 09:54:21JavaScript

实现折叠效果的方法

使用JavaScript实现折叠效果可以通过操作DOM元素的显示和隐藏来完成。以下是几种常见的实现方式：

1. 使用classList切换类名

通过添加或移除CSS类来控制元素的显示和隐藏：

const toggleBtn = document.querySelector('.toggle-btn');
const content = document.querySelector('.content');

toggleBtn.addEventListener('click', () => {
  content.classList.toggle('hidden');
});

对应的CSS：

.hidden {
  display: none;
}

2. 直接操作style属性

通过修改元素的style.display属性来实现：

const btn = document.getElementById('toggleBtn');
const box = document.getElementById('contentBox');

btn.addEventListener('click', function() {
  if (box.style.display === 'none') {
    box.style.display = 'block';
  } else {
    box.style.display = 'none';
  }
});

3. 添加动画效果

使用CSS transition实现平滑的折叠动画：

const accordion = document.querySelector('.accordion');
accordion.addEventListener('click', function() {
  this.classList.toggle('active');
  const panel = this.nextElementSibling;
  if (panel.style.maxHeight) {
    panel.style.maxHeight = null;
  } else {
    panel.style.maxHeight = panel.scrollHeight + 'px';
  }
});

对应的CSS：

.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

4. 使用jQuery实现

如果项目中使用jQuery，可以更简洁地实现：

$('.toggle-button').click(function() {
  $(this).next('.content').slideToggle();
});

5. 实现手风琴效果

多个折叠项中只保持一个展开：

js 实现折叠

const accordions = document.querySelectorAll('.accordion-header');
accordions.forEach(header => {
  header.addEventListener('click', () => {
    const currentlyActive = document.querySelector('.accordion-header.active');
    if(currentlyActive && currentlyActive !== header) {
      currentlyActive.classList.remove('active');
      currentlyActive.nextElementSibling.style.maxHeight = 0;
    }

    header.classList.toggle('active');
    const content = header.nextElementSibling;
    if(header.classList.contains('active')) {
      content.style.maxHeight = content.scrollHeight + 'px';
    } else {
      content.style.maxHeight = 0;
    }
  });
});