js实现文字收起展开功能

以下是一个简单的JavaScript实现文本收起展开功能的例子：

HTML部分：

<div id="text-container">
  <p>这里是一段很长的文本，需要实现收起和展开的功能。</p>
  <button id="collapse-btn">收起</button>
</div>

CSS部分（可选，用于隐藏或显示文本）：

#text-container p {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}
 
.show-text #text-container p {
  max-height: 100px; /* 设置合适的最大高度 */
}

JavaScript部分：

document.getElementById('collapse-btn').addEventListener('click', function() {
  var container = document.getElementById('text-container');
  container.classList.toggle('show-text');
  this.textContent = this.textContent === '收起' ? '展开' : '收起';
});

这段代码实现了基本的文本收起展开功能。点击按钮后，文本的最大高度从0变为设定的值（如100px），从而展示出隐藏的文本内容。再次点击按钮，文本的最大高度重置为0，实现隐藏。通过classList.toggle方法动态切换CSS类名，从而控制文本的显示和隐藏。