如何使用javascript默认显示较少的html文本

时间:2016-10-12 03:18:44

标签: javascript html

我是新手使用javascript但无法找到与我的案例相关的问题。我在网站上有一个页面,我希望在页面加载时显示较少的文本,以便访问者可以单击阅读更多链接以了解有关该特定服务的更多信息。目前,当页面加载时显示所有文本,我也注意到一些文本被截断。我该如何解决这两个问题?这是网站链接

http://www.urbanops.com.ng/services.php

以下是javascript

$(document).ready(function() {
var showChar = 250; // no of characters i want shown by default when page loads
var ellipsestext = "...";
var moretext = "Show less";
var lesstext = "Show more";


$(".more").each(function() {
    var content = $(this).html();

    if(content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar, content.length - showChar);

        var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

        $(this).html(html);
    }

});

$(".morelink").click(function(){
    if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle(300);
    $(this).prev().toggle(300);
    return false;
    });
});

0 个答案:

没有答案