网站页面内容折叠和收起怎么弄（手把手教你制作内容折叠和收起）

最新推荐文章于 2025-03-22 23:14:35 发布

拼才会有未来

最新推荐文章于 2025-03-22 23:14:35 发布

阅读量7.4k

点赞数 36

分类专栏：前端/css/html/js 文章标签： javascript 前端

本文链接：https://blog.csdn.net/QQ183718318/article/details/134897993

版权

前端/css/html/js 专栏收录该内容

6 篇文章

订阅专栏

前言

在浏览网页时，我们经常会遇到内容过多的情况，这时候如果能够把一部分内容折叠起来，只展示关键信息，就能大大提高用户的阅读体验。那么，如何在自己的网站上实现内容折叠和收起的功能呢？接下来，就让我们手把手教你制作内容折叠和收起吧！

Ps：本教程适合不懂技术、新手、SEO群体，如果是你大神，这篇教程对你来说也没有益处。

一、确定需要折叠的内容

首先，我们需要确定哪些内容需要折叠。一般来说，对于一些详细描述、解释性文字或者辅助性信息，我们可以考虑将其折叠起来，以便用户可以快速浏览到核心内容。

二、选择合适的折叠方式

在确定了需要折叠的内容之后，接下来我们要选择合适的折叠方式。常见的折叠方式有两种：一种是点击折叠，即用户点击某个按钮或链接后，相关内容才会展开；另一种是滚动折叠，即用户滚动到某个位置时，相关内容才会自动展开。本次介绍的是点击折叠，滚动折叠下次再写教程。

点击折叠使用说明

1.HTML

<div class="content" id="content">  
{$content}
</div>  
<button id="toggleButton" class="toggle-button">展开阅读全文</button>

说明：{$content}是详情页调用标签；
将上面的HTML全部复制到内容模板中的内容区域，注意：根据自身模板的div和class进行修改。

比如：<div class="entry-content">是小编的网站内容模板中的文章正文div，哪么将entry-content复制到<div class="content" id="content"> 中，即：<div class="content entry-content" id="content"> 即可。

如图：
修改之后，模板这里就算完事了。接下来就是按钮的CSS样式了。

CSS

.edibox {  
  width: 100%; /* 容器宽度自适应 */  
}  
.toggle-button {  
  display: block;  
  margin: 0 auto; /* 水平居中显示按钮 */  
  padding: 10px 20px; /* 按钮的内边距 */  
  background-color: rgba(255, 255, 255, 0.5);   /* 透明背景 */  
  border: 2px solid #33b8e1; /* 天蓝色边框 */  
  color: #33b8e1; /* 天蓝色字体 */  
  font-size: 16px; /* 字体大小 */  
  font-weight: bold; /* 加粗字体 */  
  cursor: pointer; /* 鼠标指针变为手形 */  
  transition: background-color 0.3s ease; /* 背景颜色过渡效果 */  
}  
.toggle-button:hover {  
  color: #48d9e8; /* 鼠标悬停时的背景颜色，带有透明度 */  
}
.content {  
  max-height: 200px; /* 内容区域最大高度为200px */  
  overflow: hidden; /* 超出部分隐藏 */  
  transition: max-height 0.5s ease-in-out; /* 展开和收起时的过渡效果 */  
}

注意：文章显示篇幅设置css：max-height:200px高度，建议设置200-500px。

CSS这里其实没有什么好说的，因为每个样式都写了注释，看注释就能看懂意思，所以这里小编就不多说了。

如果自己有能力写样式，可以根据个人爱好修改样式优化样式显示美观。

Javascript

// 获取ID为'toggleButton'的元素，通常是一个按钮，然后给它添加一个点击事件监听器  
document.getElementById('toggleButton').addEventListener('click',  
function() {  
    // 获取ID为'content'的元素，通常是一个包含文本或其他内容的容器  
    var content = document.getElementById('content');  
  
    // 检查'content'元素的maxHeight样式属性是否存在值  
    if (content.style.maxHeight) {  
        // 如果maxHeight存在值，说明内容当前是被限制的，我们将其设为null来展开全部内容  
        content.style.maxHeight = null; // 展开全部内容    
  
        // 同时将按钮的文本改为'展开阅读全文'，提示用户可以点击收起内容  
        this.textContent = '展开阅读全文'; // 按钮文本改为“收起全文”    
    } else {  
        // 如果maxHeight不存在值，说明内容当前是全部展开的，我们将其设为内容的scrollHeight来收起内容到限定高度  
        content.style.maxHeight = content.scrollHeight + 'px'; // 收起内容到限定高度    
  
        // 同时将按钮的文本改为'收起'，提示用户可以点击展开全部内容  
        this.textContent = '收起'; // 按钮文本改为“查看全文”    
    }  
});