js实现折叠展开

2026-02-02 20:59:14JavaScript

实现折叠展开的基本方法

使用HTML和CSS结合JavaScript可以实现折叠展开效果。以下是一个简单的实现方式：

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

.toggle-content {
  display: none;
  transition: all 0.3s ease;
}

.toggle-content.active {
  display: block;
}

const toggleButton = document.querySelector('.toggle-button');
const toggleContent = document.querySelector('.toggle-content');

toggleButton.addEventListener('click', function() {
  toggleContent.classList.toggle('active');
});

使用jQuery实现折叠展开

如果项目中已经引入了jQuery，可以更简洁地实现这个功能：

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

动画效果优化

为了获得更平滑的动画效果，可以使用height和opacity属性：

js实现折叠展开

.toggle-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.toggle-content.active {
  max-height: 500px;
  opacity: 1;
}

多元素折叠展开控制

当需要控制多个折叠面板时，可以为每个面板添加唯一标识：

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

使用details元素实现原生折叠

HTML5提供了原生折叠元素，不需要JavaScript：

js实现折叠展开

<details>
  <summary>点击展开/折叠</summary>
  <p>这里是折叠内容...</p>
</details>

带图标指示的折叠面板

可以添加图标来增强用户体验：

.toggle-button::after {
  content: '+';
  margin-left: 5px;
}

.toggle-content.active + .toggle-button::after {
  content: '-';
}

响应式折叠菜单

在移动端创建响应式折叠菜单：

const menuButton = document.querySelector('.menu-toggle');
const navMenu = document.querySelector('.nav-menu');

menuButton.addEventListener('click', function() {
  navMenu.classList.toggle('show');
  this.classList.toggle('open');
});

标签: js