Discuz!社区帖子内容页实现仿CSDN展开阅读全文效果

admin · 发表于 2020-7-13 23:29:30

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

完整代码如下
JS代码

function pd(ele,bili){//ele是展开阅读全文的点击按钮，bili是高度比例，一般为1
var n = $("div.article_content"),
e = n.children(),
l = e.length, //获取内容区域子元素的数量
h=0,c=0; //h是显示区域的高度，c是计数器，显示多少个元素
if (l > 20){
e.each(function(){
c += 1;
if (c<=20){h += $(this).height()}
})
n.css({//设置显示区域的高度
height: h * bili + "px",
overflow: "hidden"
})
}else{ele.parent().remove()}//少于20个元素就不用隐藏
}
(function(){
var i = $(".btn-readmore"), //展开阅读全文的点击按钮
n = $("div.article_content");
i.click(function(){
　　$(this).parent().remove();//取消隐藏
　　n.css({height:'auto',});//高度自适应
　　n.after('{{lisnext|safe}}')//插入剩余内容，{{lisnext|safe}}是flask的调用内容，其他框架的自行修改。
})
pd(i, 1)
})()

复制代码

HTML代码

<div class="article_content">{{lispre|safe}}</div>
<div class="hide-article-box hide-article-pos text-center">
　　<a class="btn-readmore">
　　　　展开阅读全文
　　　　<i class="layui-icon layui-icon-down" style="font-size: 18px; color: #ca0c16;vertical-align:middle;"></i>
　　</a>
</div>

复制代码

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-19 09:11:35

要实现Discuz!社区帖子内容页仿CSDN展开阅读全文的效果，你可以按照以下步骤进行操作。我们将使用你提供的JS代码，并对其进行完善和优化。

### 1. HTML结构
首先，确保你的帖子内容页的HTML结构如下：

<div class="article_content">
</div>
<a href="javascript:;" class="read-more">展开阅读全文</a>

复制代码

### 2. CSS样式
为了控制展开和收起的效果，我们需要添加一些CSS样式：

.article_content {
overflow: hidden;
max-height: 200px; /* 初始显示的高度 */
transition: max-height 0.5s ease;
}
.article_content.expanded {
max-height: none; /* 展开后的高度 */
}
.read-more {
display: block;
text-align: center;
margin-top: 10px;
color: #007bff;
cursor: pointer;
}

复制代码

### 3. JavaScript代码
接下来，完善你提供的JS代码，并添加事件监听器来控制展开和收起的效果：

function pd(ele, bili) {
var n = $("div.article_content"),
e = n.children(),
l = e.length, // 获取内容区域子元素的数量
h = 0, c = 0; // h是显示区域的高度，c是计数器，显示多少个元素
if (l > 20) {
e.each(function() {
c += 1;
if (c <= 20) {
h += $(this).outerHeight(true);
}
});
n.css('max-height', h + 'px');
$(ele).on('click', function() {
if (n.hasClass('expanded')) {
n.removeClass('expanded');
$(this).text('展开阅读全文');
} else {
n.addClass('expanded');
$(this).text('收起');
}
});
} else {
$(ele).hide(); // 如果内容少于20个元素，隐藏“展开阅读全文”按钮
}
}
// 调用函数
pd('.read-more', 1);

复制代码

### 4. 解释代码
- **HTML结构**：`article_content`是帖子内容的容器，`read-more`是展开/收起的按钮。
- **CSS样式**：通过`max-height`和`transition`属性来控制内容的展开和收起效果。
- **JavaScript代码**：
  - `pd`函数用于计算内容的高度，并根据内容数量决定是否显示“展开阅读全文”按钮。
  - 如果内容超过20个元素，则计算前20个元素的高度，并设置`max-height`。
  - 点击按钮时，切换`expanded`类来控制内容的展开和收起。

### 5. 使用说明
将上述代码分别放入你的Discuz!模板文件中：
- HTML代码放入帖子内容页的模板文件（如`viewthread.htm`）。
- CSS代码放入样式文件（如`common.css`）。
- JavaScript代码放入脚本文件（如`common.js`），并在页面加载时调用`pd`函数。

### 6. 注意事项
- 确保jQuery库已加载，因为代码中使用了jQuery。
- 如果帖子内容较少（少于20个元素），按钮将自动隐藏。

通过以上步骤，你可以在Discuz!社区帖子内容页实现仿CSDN的展开阅读全文效果。如果有任何问题，欢迎继续提问！
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。