Question

我正在尝试将列表视图中的描述文本限制为一定数量的字符，并可选择在单击时切换其余部分。限制文本不是问题，它适用于以下代码段http://jsfiddle.net/lgtsfiddler/G42dR/5/

$("p").each(function(i) {
    len = $(this).text().length;
    if (len > 150) {
        $(this).text($(this).html().substr(0, 150));
    }
});

如何向其添加下拉事件？

Answer 1

这样做的一种方法是将“预览”部分和文本的其余部分分开包含在单独的跨度中。然后，您可以添加一个链接，以切换是否隐藏或显示包含文本剩余部分的范围：

$(this).html("<span>" + $(this).text().substr(0,150) + "</span><span style='display:none'>" + $(this).text().substr(150) + "</span>");

var link = $("<a href='#' class='more'>More..</a>");
$(this).append(link);
$(link).click(function(){
    $(this).prev().toggle();
    $(this).html($(this).html()=="More.."?"Less":"More..");
});

演示：http://jsfiddle.net/G42dR/9/

Answer 2

这对您有帮助吗？

            $('p').each(function(){
                if($(this).text().length > 150){
                    $(this).attr('data-text', $(this).text());
                    $(this).text($(this).text().substring(0, 150));
                    $(this).after($('<a onclick="$(this).prev().text($(this).prev().attr(\'data-text\')); $(this).remove();"> Read more...</a>'));
                }
            });

使用jquery限制文本

2 个答案: