多行展开收起的三种解决方案

2023-11-16 13:40:54

在互联网浏览过程中，我们经常会遇到需要动态展示或收起文本内容的情况，例如新闻详情页、商品页面等。实现多行展开收起效果的方法有多种，本文将介绍其中三种最常用的解决方案。

方案一：CSS实现

CSS实现方法是最简单的，不需要引入额外的库或框架，代码如下：

.content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-show {
  -webkit-line-clamp: unset;
}

只需要给需要展开收起的内容添加content类名，并使用-webkit-line-clamp属性限制显示的行数，当点击展开按钮时，移除content类名，即可实现展开效果。

方案二：jQuery实现

jQuery实现方法相对复杂，但功能更强大，代码如下：

$(function() {
  $(".content").hide();
  $(".show-more").click(function() {
    $(this).prev(".content").slideToggle();
  });
});

这种方法使用jQuery的hide()、show()方法控制内容的显示隐藏，当点击展开按钮时，切换内容的显示状态。

方案三：JavaScript实现

JavaScript实现方法与jQuery实现类似，但不需要引入jQuery库，代码如下：

const content = document.querySelector(".content");
const showMore = document.querySelector(".show-more");

showMore.addEventListener("click", function() {
  content.classList.toggle("show");
});

这种方法使用JavaScript的classList属性控制内容的显示隐藏，当点击展开按钮时，切换show类名，即可实现展开效果。

方案对比

方案	优点	缺点
CSS	简单易用，不需要引入额外的库或框架	仅支持webkit内核浏览器，兼容性较差
jQuery	功能强大，兼容性好	需要引入jQuery库，增加页面加载时间
JavaScript	无需引入额外库，兼容性好	代码复杂度较高，维护性差