当前位置：首页 > JavaScript

js实现折叠展开

2026-04-07 14:44:26JavaScript

实现折叠展开功能

使用JavaScript实现折叠展开功能可以通过操作DOM元素的显示和隐藏来完成。以下是几种常见的实现方式。

使用classList切换类名

通过添加或移除CSS类来控制元素的显示和隐藏。定义一个隐藏的CSS类，例如.hidden { display: none; }，然后通过JavaScript切换这个类。

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

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

直接修改style属性

通过直接修改元素的style.display属性来实现折叠和展开。这种方式不需要预先定义CSS类。

js实现折叠展开

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

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

使用slide动画效果

如果需要更平滑的展开和折叠动画，可以使用height和transition属性结合JavaScript实现slide效果。

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

toggleButton.addEventListener('click', () => {
  if (content.style.height === '0px' || !content.style.height) {
    content.style.height = content.scrollHeight + 'px';
  } else {
    content.style.height = '0px';
  }
});

对应的CSS：

js实现折叠展开

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

使用details和summary标签

HTML5提供了<details>和<summary>标签，可以无需JavaScript实现简单的折叠展开功能。

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

如果需要自定义样式或行为，仍然可以通过JavaScript来增强功能。

const details = document.querySelector('details');
details.addEventListener('toggle', (event) => {
  console.log(event.target.open ? '展开' : '折叠');
});

动态内容折叠

如果折叠内容是动态加载的，需要在内容更新后重新计算高度。

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

toggleButton.addEventListener('click', () => {
  if (content.classList.contains('collapsed')) {
    content.style.height = content.scrollHeight + 'px';
    content.classList.remove('collapsed');
  } else {
    content.style.height = '0px';
    content.classList.add('collapsed');
  }
});

// 动态内容更新后
function updateContent() {
  if (!content.classList.contains('collapsed')) {
    content.style.height = 'auto';
    const newHeight = content.scrollHeight;
    content.style.height = newHeight + 'px';
  }
}

这些方法可以根据具体需求选择使用，简单的折叠展开功能推荐使用classList或直接修改style属性，需要动画效果时可以使用slide动画方式。

标签: js