按钮点击展开再点击收起 js

实现按钮点击展开与收起功能（JS）

核心逻辑

通过监听按钮的点击事件，动态切换内容区域的显示状态,并同步修改按钮的文本或样式。

实现步骤

HTML结构

<button id="toggleBtn">展开</button>
<div id="content" class="collapse-box">
  <p>这里是需要展开/收起的内容...</p>
</div>

CSS样式

.collapse-box {
  max-height: 0;          / 默认收起状态 /
  overflow: hidden;       / 隐藏溢出内容 /
  transition: max-height 0.3s ease; / 过渡动画 /
}
.collapse-box.expanded {
  max-height: 500px;      / 展开时的最大高度（需覆盖内容实际高度） /
}

JavaScript逻辑

const btn = document.getElementById('toggleBtn');
const content = document.getElementById('content');
btn.addEventListener('click', () => {
  // 切换展开/收起状态
  content.classList.toggle('expanded');
  // 同步修改按钮文本
  btn.textContent = content.classList.contains('expanded') ? '收起' : '展开';
});

关键细节说明

扩展优化建议

1. 动态高度适配 高度不固定，可用 JavaScript 动态计算高度：

   const maxHeight = content.scrollHeight + 'px'; // 获取内容实际高度
   // 在 CSS 中替换固定值：max-height: var(--dynamic-height, 500px);

2. 图标替代文本
   使用字体图标（如 FontAwesome）增强视觉效果：

   <button id="toggleBtn"><i class="fa fa-plus"></i></button>

   btn.addEventListener('click', () => {
     content.classList.toggle('expanded');
     btn.querySelector('i').classList.toggle('fa-plus', !content.classList.contains('expanded'));
     btn.querySelector('i').classList.toggle('fa-minus', content.classList.contains('expanded'));
   });

相关问题与解答

问题1：如何让展开/收起动画更自然？

解答：
可改用 height 属性代替 max-height，并通过 JavaScript 记录初始高度,动态设置过渡值。

let initialHeight = content.offsetHeight; // 初始高度（收起状态）
content.style.height = `${initialHeight}px`; // 显式设置高度以触发过渡

配合 CSS：

.collapse-box {
  height: 0;
  transition: height 0.3s ease;
}
.collapse-box.expanded {
  height: 500px; / 需覆盖实际内容高度 /
}

问题2：如何限制展开内容的最大高度？

解答：
在 CSS 中设置 max-height 或通过 JavaScript 动态限制高度。

btn.addEventListener('click', () => {
  if (content.classList.contains('expanded')) {
    content.style.maxHeight = '500px'; // 限制最大展开高度
  } else {
    content.style.maxHeight = '0';