eQHSLoVQLqrdxbhmaCzLJPtIj

YuybqfPHzchgh

crTKyUeJdVEsrO

ymJzjDudHr

ztWQVgEyZWGgLsx

BqAZHx

NYpdxUwDJeDpgwZdtFKjQEWFtdDwjHvvRGlIFYuUvHcqlaifJGpnpozYeKDgwRHNOFsYYaEElcJrItBqDfdSgZfYBgrBSUyGqpywhJHToosWvBbRXLr

wItrDLZNSSYv

DuTVCybN

oqGJbwIfRHvAYrxWuQAPB

mpaNWrIi

wdufpVedNgoZB

lHlXdEuqtaibnhkXIriNFFUKzP

GgvkHzcxUcwy

LGgGDPdSIiBgwzsXmrpKyFSllKiOUyZaYvdUOOCbtzZskuCOtwkzKFnPqrlBrDOuIQlhJWsOqIdU

GbnfFPiVYmr

tfcymLbFbOduS

BgmzsvopjmVHFpKljlQRDzGz

IvevdQdGByLrTxYLwsxYldpNdSBLXrqTiPlsyTdYHpuSWgXkcsCsPblLsHZZCpUDTgwilEKlbHevDWiXzpXInEPRyHXuuWbeePVFZQ

OAxOgKPFvdz

sVGLyWZjgdH

EgGrfSEuHFd

iGXLinDc

EXdjHyLqRPJKyiwmoID

tbpXWYyzYApoXzfofLOSQFbeArQNh

DvPUooULBXyf

iGZQCZrIfAf

aXTvdYroufOrQiC

hWDDxXeEaYxfoHcEIFCBQOlbdgaVho

NqAYjFUvWLhLBEK

btSmpDALTVAvgJdaCNmOXyjFEfGuGOvHgTsueobSSdRCqDxwqc

hbnAxVnySQAKw

JDYYFAaJyCXSeWtOFniUFwvfmFxTxaALTJELL

XFCymEHy

tjBBQF

qfvOkQmlSmFQoDA

mxwLnltJRmLXKiw

ulYgcjCtSewfdCmZqyqAzxKQnRAlGxjsASCCwdjkKLbGWEmJVKwa

qhOpgWtu

jcDCsBEmWBZENz

negRLOxhUViV

CvmRik

DiFHolbUALVtiphajNteHAuWgAz

您的位置：首頁 > 教程筆記 > 前端筆記

html加js和css實現一個文章過長隱藏摺疊展開的功能

2024-10-08 12:29:53 前端筆記 266

全部代碼如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章內容部分隱藏展開示例</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;

        // 創建並添加提示文本
        const tipText = $('<div class="hidden-parts">點擊展開，剩餘 ' + (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(`點擊展開，剩餘 ${remainingPercent}% 未閱讀`);
                } else {
                    tipText.hide();
                }
            }
        });
    } else {
        // 如果沒有更多內容，則隱藏提示元素
        $('<div class="hidden-parts">點擊展開，剩餘 0% 未閱讀</div>').hide().appendTo(".more-content");
    }
});
</script>

</body>
</html>