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>