当前位置：首页 > JavaScript

js实现折叠展开

2026-03-15 21:21:05JavaScript

实现折叠展开的基本方法

使用JavaScript实现折叠展开功能可以通过操作DOM元素的display或height属性来完成。以下是两种常见方式：

通过切换display属性

function toggleCollapse(elementId) {
  const element = document.getElementById(elementId);
  if (element.style.display === 'none') {
    element.style.display = 'block';
  } else {
    element.style.display = 'none';
  }
}

通过CSS类切换

js实现折叠展开

.collapsed {
  display: none;
}

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

添加动画效果

使用CSS过渡实现平滑的展开/折叠动画效果：

CSS部分

js实现折叠展开

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

.collapsible.expanded {
  max-height: 500px; /* 设置为足够大的值 */
}

JavaScript部分

function toggleCollapse(elementId) {
  document.getElementById(elementId).classList.toggle('expanded');
}

完整组件实现

创建一个可复用的折叠组件：

<button class="toggle-button">Toggle Content</button>
<div class="collapsible-content">
  <p>这里是可折叠的内容...</p>
</div>

<script>
  document.querySelector('.toggle-button').addEventListener('click', function() {
    this.classList.toggle('active');
    const content = this.nextElementSibling;
    content.classList.toggle('expanded');

    // 可选：动态设置max-height
    if (content.classList.contains('expanded')) {
      content.style.maxHeight = content.scrollHeight + 'px';
    } else {
      content.style.maxHeight = '0';
    }
  });
</script>

使用details/summary原生HTML元素

HTML5提供了原生折叠解决方案：

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

<!-- 添加CSS美化 -->
<style>
  details {
    border: 1px solid #ddd;
    padding: 0.5em;
    border-radius: 4px;
  }
  summary {
    cursor: pointer;
    outline: none;
  }
</style>