javascript实现一段文字的展开收起功能
随着网页设计越来越注重用户体验，越来越多的页面设计中会出现需要展开或收起一段文字的情况，这时候我们可以使用JavaScript代码来实现这个功能。下面我们就来看一下，如何使用JavaScript来实现一段文字的展开和收起功能。
- HTML代码
首先，我们需要准备一段HTML代码，这段代码可以是需要展开收起的文字以及其余的页面元素。示例代码如下：
<div class="content"> <p>这是一段需要展开收起的文字，可以有很多很多的字，可能会占据很多的空间。因此，在默认情况下，我们只会显示部分文字，而把其余的部分折叠起来。如果需要查看全部内容，可以点击“查看更多”按钮，文字内容就会展开显示了。</p> <button class="btn-more">查看更多</button> </div>
在这段代码中，我们用一个<div>标签来包裹需要展开收起的文字以及按钮元素。在<div>标签中，我们用一个<p>标签来显示需要展开收起的文字内容，在文字内容的下方，使用一个<button>标签来显示“查看更多”的按钮。
- CSS样式
我们需要使用CSS来设置需要展开收起的文字在默认情况和展开状态下的样式。
立即学习“Java免费学习笔记（深入）”；
.content p {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* 设置文字溢出时显示省略号 */
}
.content p.is-expanded {
overflow: visible;
white-space: normal;
/* 文字溢出时不再显示省略号 */
}
.btn-more {
display: block;
margin-top: 10px;
cursor: pointer;
/* 设置鼠标指针为手型 */
}- JavaScript代码
接下来，我们需要使用JavaScript代码来实现“查看更多”按钮的点击事件，使得点击按钮时可以展开或者收起需要展开收起的文字。
首先，我们可以创建一个变量来存储当前是否处于展开状态，初始状态为false，即处于折叠状态。
let isExpanded = false;
当用户点击“查看更多”按钮时，我们需要获取需要展开收起的文字的<p>元素，并为这个元素添加或移除一个is-expanded的class。同时，更改按钮的文本内容，显示“更少”或“查看更多”，以提示用户当前的文字状态。
const content = document.querySelector('.content');
const btnMore = document.querySelector('.btn-more');
btnMore.addEventListener('click', function() {
const paragraph = content.querySelector('p');
isExpanded = !isExpanded;
if (isExpanded) {
paragraph.classList.add('is-expanded');
btnMore.innerText = '收起';
} else {
paragraph.classList.remove('is-expanded');
btnMore.innerText = '查看更多';
}
});在这段代码中，我们首先使用document.querySelector()方法获取到需要展开收起的文字对应的<p>元素和“查看更多”按钮对应的<button>元素。然后，给按钮元素添加一个点击事件监听器，当用户点击按钮时会触发这个事件。
在事件监听器中，我们会通过isExpanded变量的状态来判断当前文字处于展开状态还是折叠状态。如果是展开状态，我们会给<p>元素添加一个is-expanded的class，并将按钮的文本设置为“收起”。反之，我们会移除is-expanded的class，并将按钮的文本设置为“查看更多”。
到此为止，我们就成功地实现了一段文字的展开收起功能。当用户点击“查看更多”按钮时，可以展开或折叠需要展开收起的文字，让页面更加的简洁和易于阅读。
