当前位置：首页 > JavaScript

js 实现折叠

2026-03-14 08:29:01JavaScript

折叠功能的实现方法

在JavaScript中实现折叠功能可以通过操作DOM元素的display或height属性来控制元素的显示与隐藏。以下是几种常见的实现方式：

使用classList切换类名 通过添加或移除CSS类来控制元素的显示与隐藏：

const toggleBtn = document.getElementById('toggleBtn');
const content = document.getElementById('content');

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

对应CSS：

.hidden {
  display: none;
}

直接操作style属性 动态修改元素的display属性：

const toggleBtn = document.getElementById('toggleBtn');
const content = document.getElementById('content');

toggleBtn.addEventListener('click', () => {
  if (content.style.display === 'none') {
    content.style.display = 'block';
  } else {
    content.style.display = 'none';
  }
});

添加动画效果 使用CSS过渡实现平滑的折叠动画：

const toggleBtn = document.getElementById('toggleBtn');
const content = document.getElementById('content');

toggleBtn.addEventListener('click', () => {
  if (content.style.maxHeight) {
    content.style.maxHeight = null;
  } else {
    content.style.maxHeight = content.scrollHeight + 'px';
  }
});

对应CSS：

#content {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

注意事项

确保为折叠内容设置合适的初始状态（显示或隐藏）

考虑添加ARIA属性以增强可访问性：

toggleBtn.setAttribute('aria-expanded', 'true');
content.setAttribute('aria-hidden', 'false');

对于动态加载的内容，需要在内容加载完成后计算正确的高度值
在移动设备上测试折叠交互，确保触控操作正常

进阶实现

对于更复杂的需求，可以考虑使用以下方案：

js 实现折叠

使用details/summary元素 HTML5原生支持折叠功能：

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

使用框架实现 Vue示例：

new Vue({
  el: '#app',
  data: {
    isExpanded: false
  }
})

模板：

<button @click="isExpanded = !isExpanded">切换</button>
<div v-show="isExpanded">内容</div>

React示例：

function Collapsible() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <>
      <button onClick={() => setIsExpanded(!isExpanded)}>切换</button>
      {isExpanded && <div>内容</div>}
    </>
  );
}

标签: js