帝国模板

织梦文章太长如何折叠文章?(点击展开,点击收起)

有问题可以加入我们的技术QQ群一起解决,我们有专门的技术人员为你解答

点击链接加入群聊【海站格技术交流群】:点我加:海站格技术交流群  (1025661873)

  现在教育行业兴起非常迅速,这不也有很多站长开始分享自己的知识了,搭建了不少收费的站点,其中有个功能比较常用到的是字数限制,当我们查看一篇文章时候,如果文章太长如何折叠起来,这部分知识在后期的收费预览可以用到,下面风向给大家:<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>限制文字字数--点击展开点击收起</title>
    <style>
        li{
            list-style: none;
        }
        p{
            width:300px;
            height:100px;
            text-indent:2em;
            line-height:150%;
            margin:5px 0 0;
        }
        p a{
            color:#FDCD3D;
        }
    </style>
</head>
<body>
<h1>一、</h1>
<ul class="rdlist">
    <li><span>测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多</span></li>
    <li><span>测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多</span></li>
    <li><span>测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多</span></li>
    <li><span>测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多</span></li>
    <li><span>测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多</span></li>
    <li><span>测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多</span></li>
</ul>

<h1>二、</h1>
<div class="">
    <a href="javascript:void" class="clickbtn"><<点击展开</a>
    <p>如果字数超过最大字数,超出部分用...代替,并且在后面加上点击展开的链接如果字数超过最大字数,超出部分用...代替,并且在后面加上点击展开的链接如果字数超过最大字数,超出部分用...代替,并且在后面加上点击展开的链接如果字数超过最大字数,超出部分用...代替,并且在后面加上点击展开的链接如果字数超过最大字数,超出部分用...代替,并且在后面加上点击展开的链接如果字数超过最大字数,超出部分用...代替,并且在后面加上点击展开的链接如果字数超过最大字数,超出部分用...代替,并且在后面加上点击展开的链接如果字数超过最大字数,超出部分用...代替,并且在后面加上点击展开的链接</p>
</div>

<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
    //一:
    console.log($('li').eq(0).children($('span')).text());
    for(var i=0;i<$('li').length;i++){
        var str = $('li').eq(i).children($('span')).text().substr(0,16) + " ...";
        $('li').eq(i).children($('span')).text(str);
    }
});

// 二:
$(function(){
    $("p").each(function(){
        var maxwidth=60;//设置最多显示的字数
        var text=$(this).text();
        if($(this).text().length>maxwidth){
            $(this).text($(this).text().substring(0,maxwidth));
            $(this).html($(this).html()+"...");//如果字数超过最大字数,超出部分用...代替,并且在后面加上点击展开的链接;

        };
        $('.clickbtn').click(function(){
            if($(this).text()=='<<点击展开'){
                $(this).text('<<点击收起');
                $('p').text(text);
            }else{
                if($('p').text().length>maxwidth){
                    $('p').text($('p').text().substring(0,maxwidth));
                    $('p').html($('p').html()+"...");
                    $(this).text('<<点击展开');
                };
            }
        });

    })
})

</script>
</body>
</html>

代码

当前位置:首页 > 建站教程 > 织梦教程 > 正文
本文地址:http://www.haiweb.cn/zmjc/469.html
'); })();