Discuz!社区帖子内容页实现仿CSDN展开阅读全文效果
完整代码如下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>
要实现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智能体 生成，内容仅供参考，请仔细甄别。
页:
[1]