如何使用 JavaScript 创建 Show More 和 Show Less 功能以隐藏文本？

有时，当用户在页面上浏览大块文本时，一些额外的内容可能会导致页面变得混乱。为了解决这个问题，我们可以使用 JavaScript 创建一个 Show More 和 Show Less 功能以隐藏文本，使内容看起来更加整洁。这篇文章将向您展示如何实现此功能。

HTML 结构

首先，我们需要在 HTML 中定义一个容器用于包裹我们想要显示或隐藏的文本。以下是一个例子：

<div class="textbox">
  <p>This is some text that we want to hide or show</p>
  <p>Another paragraph that we want to hide or show</p>
  <p>And another one</p>
</div>

CSS 样式

我们可以使用 CSS 样式来控制在文本被隐藏时，容器的外观。例如，当文本被隐藏时，可以将容器高度设置为固定值。

.textbox {
  height: 100px;
  overflow: hidden;
}

JavaScript 功能

现在，我们需要在 JavaScript 文件中添加 Show More 和 Show Less 的代码。我们可以使用以下代码来创建这个功能：

// Get the div that contains the text we want to show/hide
var div = document.querySelector('.textbox');
// Get the button that will show/hide the text
var button = document.createElement('button');
button.textContent = 'Show More';

// Add the button to the div
div.appendChild(button);

// Add click event listener to the button
button.addEventListener('click', function() {
  // Check if the text is currently hidden
  if (div.classList.contains('hidden')) {
    // Set height to auto and remove the class
    div.style.height = 'auto';
    div.classList.remove('hidden');
    button.textContent = 'Show Less';
  } else {
    // Set height back to 100px and add the class
    div.style.height = '100px';
    div.classList.add('hidden');
    button.textContent = 'Show More';
  }
});

这段代码创建了一个 Show More 的按钮，并为其添加了点击事件。当按钮被点击时，检查文本是否当前是隐藏的。如果是，则将高度设置为 auto，将隐藏的 class 移除，同时将按钮文本更新为 Show Less。如果文本当前显示，则将高度设置回 100px，添加隐藏 class，并将按钮文本更新为 Show More。

完整示例

<div class="textbox">
  <p>This is some text that we want to hide or show</p>
  <p>Another paragraph that we want to hide or show</p>
  <p>And another one</p>
</div>

<style>
.textbox {
  height: 100px;
  overflow: hidden;
}
.hidden {
  height: 100px;
}
</style>

<script>
// Get the div that contains the text we want to show/hide
var div = document.querySelector('.textbox');
// Get the button that will show/hide the text
var button = document.createElement('button');
button.textContent = 'Show More';

// Add the button to the div
div.appendChild(button);

// Add click event listener to the button
button.addEventListener('click', function() {
  // Check if the text is currently hidden
  if (div.classList.contains('hidden')) {
    // Set height to auto and remove the class
    div.style.height = 'auto';
    div.classList.remove('hidden');
    button.textContent = 'Show Less';
  } else {
    // Set height back to 100px and add the class
    div.style.height = '100px';
    div.classList.add('hidden');
    button.textContent = 'Show More';
  }
});
</script>

以上就是使用 JavaScript 创建 Show More 和 Show Less 功能以隐藏文本的实现方法。使用此方法可以使文本更加整洁，同时提高用户体验。