js 展开收起效果

在 JavaScript 中实现展开收起效果，通常涉及到 HTML 结构的调整和 CSS 样式的切换，以及 JavaScript 逻辑的处理。

基础概念：

利用元素的显示与隐藏属性来控制内容的展现。
通过添加或移除 CSS 类来改变元素的样式。

优势：

提升用户体验，使页面内容更具层次感和可读性。
节省页面空间，避免一次性展示过多信息。

类型：

简单的展开收起：点击一次切换显示与隐藏。
带动画效果的展开收起：使切换过程更平滑。

应用场景：

导航菜单的子菜单展示。
文章内容的段落展开。
列表项的详细信息查看。

实现示例：

HTML 结构：

<div class="container">
  <button id="toggleButton">展开</button>
  <div id="content" class="hidden">
    这是要展开和收起的内容。
  </div>
</div>

CSS 样式：

.hidden {
  display: none;
}

.content-visible {
  display: block;
}

JavaScript 逻辑：

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

toggleButton.addEventListener('click', () => {
  if (content.classList.contains('hidden')) {
    content.classList.remove('hidden');
    content.classList.add('content-visible');
    toggleButton.textContent = '收起';
  } else {
    content.classList.remove('content-visible');
    content.classList.add('hidden');
    toggleButton.textContent = '展开';
  }
});

常见问题及原因：