javascript实现一段文字展开收起-前端问答-PHP中文网

javascript实现一段文字展开收起

WBOY

发布： 2023-05-17 18:17:38

原创

1308人浏览过

javascript实现一段文字的展开收起功能

随着网页设计越来越注重用户体验，越来越多的页面设计中会出现需要展开或收起一段文字的情况，这时候我们可以使用JavaScript代码来实现这个功能。下面我们就来看一下，如何使用JavaScript来实现一段文字的展开和收起功能。

HTML代码

首先，我们需要准备一段HTML代码，这段代码可以是需要展开收起的文字以及其余的页面元素。示例代码如下：

<div class="content">
  <p>这是一段需要展开收起的文字，可以有很多很多的字，可能会占据很多的空间。因此，在默认情况下，我们只会显示部分文字，而把其余的部分折叠起来。如果需要查看全部内容，可以点击“查看更多”按钮，文字内容就会展开显示了。</p>
  <button class="btn-more">查看更多</button>
</div>

登录后复制

在这段代码中，我们用一个

标签来包裹需要展开收起的文字以及按钮元素。在

标签中，我们用一个

标签来显示需要展开收起的文字内容，在文字内容的下方，使用一个

立即学习“Java免费学习笔记（深入）”；

CSS样式

我们需要使用CSS来设置需要展开收起的文字在默认情况和展开状态下的样式。

.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;

登录后复制

当用户点击“查看更多”按钮时，我们需要获取需要展开收起的文字的

元素，并为这个元素添加或移除一个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()方法获取到需要展开收起的文字对应的

元素和“查看更多”按钮对应的

在事件监听器中，我们会通过isExpanded变量的状态来判断当前文字处于展开状态还是折叠状态。如果是展开状态，我们会给

元素添加一个is-expanded的class，并将按钮的文本设置为“收起”。反之，我们会移除is-expanded的class，并将按钮的文本设置为“查看更多”。

到此为止，我们就成功地实现了一段文字的展开收起功能。当用户点击“查看更多”按钮时，可以展开或折叠需要展开收起的文字，让页面更加的简洁和易于阅读。

以上就是javascript实现一段文字展开收起的详细内容，更多请关注php中文网其它相关文章！