Django中如何实现长文本的折叠

题目

Django中如何实现长文本的折叠

示意图

方法

• 第一步：html

<div class="item">
<div class="time">2022-1-1</div>
<div class="title">substring的介绍？</div>
<div class="favcontent">1.substring 方法 定义和用法substring 方法用于提取字符串中介于两个指定下标之间的字符。 语法stringObject.substring(start,stop)参数 描述start 必需。一个非负的整数， 规定要提取的子串的第一个字符在 stringObject 中的位置。stop 可选。一个非负的整数， 比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的 子串会一直到字符串的结尾。返回值一个新的字符串，该字符串值包含stringObject 的一个子字符串， 其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。说明substring 方法返回的子串包 括 start 处的字符，但不包括 end 处的字符。如果 start 与 end 相等，那么该方法返回的就是一个空串（即长度 为 0 的字符串）。</div>
</div>

• 第二步：css

折叠之后的样式
.favcontent {
    font-size: 16px;
    color: #555;
    padding-bottom: 10px;
    letter-spacing: 1px;
    line-height: 26px;
}

折叠之前的样式
.favcontent2 {
    font-size: 16px;
    color: #555;
    padding-bottom: 10px;
    letter-spacing: 1px;
    line-height: 26px;
    display: none;
}

【展开｜折叠】样式
.a-text {
    font-size: 16px;
    color: #337ab7;
    cursor: pointer;
}

取消a标签样式
.favcontent a {
    text-decoration: none;
}

鼠标停留【展开｜折叠】时的样式
.a-text:hover {
    font-weight: bold;
}

• 第三步：js

<script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        text_foled('.favcontent', 150);
    });

    function text_foled(clas, num) {
        var num = num;
        当点击展开时执行showText函数
        var a = $("<a></a>").on('click', showText).addClass('a-text').text("【展开】");
        当点击折叠时执行showText函数
        var b = $("<a></a>").on('click', showText).addClass('a-text').text("【折叠】");
        展开时的样式，一开始时p的display为隐藏
        var p = $("<p></p>").addClass('favcontent2');
        获取全部内容
        var str = $(clas).text();
        $(clas).after(p);
        if (str.length > num) {
            var text = str.substring(0, num) + "...";
            $(clas).html(text).append(a);
        }
        $('.favcontent2').html(str).append(b);

        function showText() {
            $(this).parent().hide().siblings().show();
        }
    }
</script>