使用“显示更多”按钮显示无限内容 - CSS

在开发网页时，经常会遇到需要显示大量文本或内容的情况。然而，这些内容可能会使页面变得过于拥挤，使用户难以找到他们真正需要的信息。为了让用户体验更好，我们可以使用“显示更多”按钮来隐藏大量的内容并让用户主动选择是否查看全部内容。

实现步骤

1. HTML结构

首先，我们需要创建基本的HTML结构，包括内容区和“显示更多”按钮。

<div class="container">
  <h2>标题</h2>
  <p>第一段内容</p>
  <p>第二段内容</p>
  <p>第三段内容</p>
  <button class="more-btn">显示更多</button>
</div>

2. CSS样式

接下来，我们需要使用CSS来隐藏多余的内容。我们可以使用max-height属性来限制内容区的高度，并使用overflow属性来控制内容区的溢出部分的流向（在本例中，我们将其设置为隐藏）。我们还需要设置button的样式来使它看起来更像一个链接而不是一个按钮。

.container {
  max-height: 200px; /* 设置最大高度 */
  overflow: hidden; /* 隐藏溢出的内容 */
}
.more-btn {
  display: block;
  background: none;
  border: none;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

3. JS脚本

最后，我们需要为按钮添加点击事件。当用户点击“显示更多”按钮时，我们将移除max-height和overflow属性，以便所有内容都能够被完全显示。

document.querySelector('.more-btn').addEventListener('click', function() {
  document.querySelector('.container').style.maxHeight = 'none';
  document.querySelector('.container').style.overflow = 'visible';
  document.querySelector('.more-btn').style.display = 'none';
});

示例代码

<div class="container">
  <h2>标题</h2>
  <p>第一段内容</p>
  <p>第二段内容</p>
  <p>第三段内容</p>
  <button class="more-btn">显示更多</button>
</div>

<style>
.container {
  max-height: 200px;
  overflow: hidden;
}
.more-btn {
  display: block;
  background: none;
  border: none;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
</style>

<script>
document.querySelector('.more-btn').addEventListener('click', function() {
  document.querySelector('.container').style.maxHeight = 'none';
  document.querySelector('.container').style.overflow = 'visible';
  document.querySelector('.more-btn').style.display = 'none';
});
</script>

这将创建一个包含“显示更多”按钮的容器。当用户单击该按钮时，它将自动展开并将全部内容显示出来。