html加js和css實(shí)現(xiàn)一個(gè)文章過長隱藏折疊展開的功能
html加js和css實(shí)現(xiàn)一個(gè)文章過長隱藏折疊展開的功能
全部代碼如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章內(nèi)容部分隱藏展開示例</title>
<style>
.more-content .hidden-parts {
font-size: 14px;
line-height: 40px;
margin: 0 auto;
color: #fff;
background: #6f98b0;
text-align: center;
height: 40px;
cursor: pointer;
width: 90%;
display: block;
border-radius: 50px;
}
.more-hidden {
overflow: hidden;
}
</style>
</head>
<body>
<div class="more-content">
<div class="more-hidden" id="unfold-fold">
<p>
這是文章的開頭部分，
這是文章的開頭部分，
這是文章的開頭部分，
</p>
</div>
</div>
<script src="/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
const content = $("#unfold-fold");
const openHeight = 100; // 初始顯示高度
const totalHeight = content.height();
const segments = Math.ceil(totalHeight / openHeight);
if (segments > 1) {
content.css('maxHeight', `${openHeight}px`);
let currentSegment = 1;
// 創(chuàng)建并添加提示文本
const tipText = $('<div class="hidden-parts">點(diǎn)擊展開，剩余 ' + (100 - (100 / segments * currentSegment)) + '% 未閱讀</div>');
$(".more-content").append(tipText);
tipText.on("click", function() {
if (currentSegment < segments) {
currentSegment++;
const remainingPercent = Math.floor(100 - (100 / segments) * currentSegment);
content.css('maxHeight', `${openHeight * currentSegment}px`);
if (remainingPercent > 0) {
tipText.html(`點(diǎn)擊展開，剩余 ${remainingPercent}% 未閱讀`);
} else {
tipText.hide();
}
}
});
} else {
// 如果沒有更多內(nèi)容，則隱藏提示元素
$('<div class="hidden-parts">點(diǎn)擊展開，剩余 0% 未閱讀</div>').hide().appendTo(".more-content");
}
});
</script>
</body>
</html>
聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至201542412@QQ.com舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。
相關(guān)推薦
-
PHP核心的擴(kuò)展開發(fā)實(shí)踐與技巧
核心的擴(kuò)展開發(fā)實(shí)踐與技巧在開發(fā)中，擴(kuò)展是一種非常重要的技術(shù)手段。通過擴(kuò)展，我們可以擴(kuò)展的功能，提高代碼的運(yùn)行效率，實(shí)現(xiàn)一些無法實(shí)現(xiàn)的功能。本文將介紹核心的擴(kuò)展開發(fā)實(shí)踐與技
-
htm加css和js實(shí)現(xiàn)手機(jī)端隱藏查看剩余點(diǎn)擊展開，剩余%未閱讀
htm加css和js實(shí)現(xiàn)手機(jī)端隱藏查看剩余點(diǎn)擊展開，剩余%未閱讀js部分代碼：html部分css部分：其中.rticl-body是第一內(nèi)容元素，.contnt第二元素...
帝國CMS模板博客文章資訊自適應(yīng)手機(jī)HTML5網(wǎng)站SEO優(yōu)化版
2023-12-26 14:39:32
美文句子文章網(wǎng)站模板自適應(yīng)作文百科資訊源碼
2023-12-22 17:46:01
帝國CMS模板個(gè)人博客美文佳句文章資訊自適應(yīng)手機(jī)網(wǎng)站源碼
2023-12-19 18:01:32
帝國cms簡潔兩端資訊文章句子網(wǎng)美文源碼詩句模板
2023-12-13 10:58:14
帝國cms大氣簡潔資訊文章博客源碼電商資訊教程網(wǎng)站模板
2023-11-30 13:56:14
