JS 实现多行文本的展开/收起，解决兼容性与显示形式问题

2023-09-15 00:29:53

JS 实现多行文本的展开/收起

在网页设计中，我们经常需要实现多行文本的展开/收起功能，以便在有限的空间内展示更多信息。传统的方法是使用 HTML 的 <details> 标签，但这种方法存在浏览器兼容性问题。本文将介绍一种使用 JS 实现多行文本展开/收起的方法，可以完美解决兼容性问题，并提供更灵活的显示形式。

HTML 结构

首先，我们需要在 HTML 中创建要展开/收起的文本内容，并为其添加一个展开/收起按钮。代码如下：

<div class="text-container">
  <p>这是一段很长的文本，需要展开才能看到全部内容。</p>
  <button class="toggle-button">展开</button>
</div>

JS 代码

接下来，我们需要编写 JS 代码来实现展开/收起功能。代码如下：

const textContainer = document.querySelector('.text-container');
const toggleButton = document.querySelector('.toggle-button');

toggleButton.addEventListener('click', () => {
  textContainer.classList.toggle('open');
});

在上面的代码中，我们首先获取了文本容器和展开/收起按钮的 DOM 元素。然后，我们为展开/收起按钮添加了一个点击事件监听器。当用户点击按钮时，我们使用 classList.toggle() 方法在文本容器上切换 open 类名。这个类名用于控制文本容器的显示状态。

CSS 样式

最后，我们需要添加一些 CSS 样式来美化展开/收起按钮和文本容器。代码如下：

.text-container {
  max-height: 100px;
  overflow: hidden;
}

.text-container.open {
  max-height: none;
}

.toggle-button {
  cursor: pointer;
  padding: 5px;
  background-color: #ccc;
  border: 1px solid #999;
  border-radius: 5px;
}

在上面的代码中，我们设置了文本容器的最大高度，并使用 overflow: hidden; 隐藏了超出最大高度的部分。当文本容器处于展开状态时，我们使用 max-height: none; 来移除最大高度限制。我们还为展开/收起按钮添加了样式，包括鼠标悬停时的光标样式、内边距、背景颜色、边框和边框圆角。