Question

我有一个问题，我们必须在产品详细信息页面的产品说明中显示/隐藏一些文字。必须将描述缩短到所需的行数，并且通过点击“更多”，将显示完整的描述。我想实现它如下面的jQuery链接所示：

http://viralpatel.net/blogs/demo/jquery/jquery.shorten.1.0.js

代码如下：

jQuery.fn.shorten = function (settings) {
    var config = {
        showChars: 100,
        ellipsesText: "...",
        moreText: "more",
        lessText: "less"
    };

    if(settings) {
        $.extend(config, settings);
    }

    $('.morelink').live('click', function () {
        var $this = $(this);
        if($this.hasClass('less')) {
            $this.removeClass('less');
            $this.html(config.moreText);
        } else {
            $this.addClass('less');
            $this.html(config.lessText);
        }
        $this.parent().prev().toggle();
        $this.prev().toggle();
        return false;
    });

    return this.each(function () {
        var $this = $(this);
        var content = $this.html();
        if(content.length > config.showChars) {
            var c = content.substr(0, config.showChars);
            var h = content.substr(config.showChars, content.length - config.showChars);
            var html = c + '<span class="moreellipses">' + config.ellipsesText + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="javascript://nop/" class="morelink">' + config.moreText + '</a></span>';
            $this.html(html);
            $(".morecontent span").hide();
        }
    });
};

我在base.tpl中插入了以下代码

<script type="text/javascript"> 
$(document).ready(function () {
    $(".comment").shorten();
}); 
</script>

我在相应的html文件中给出了以下类：

<div class="comment">  
   <!-- Link for getting the description from backend -->
</div >

由于细节来自后端，底层的动态div以及其中的无序列表都没有生效，请建议我实现此功能的一些方法。

Answer 1

我们在门户网站中做的一件事是使用text-overflow css属性。您可以为描述框定义高度，然后使用类似于此的类来为您提供省略号，表明还有更多要阅读的内容。

.flo
{
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

然后，您可以添加更多阅读按钮，或者单击以展开交易类型，然后将内容展开以完整显示。只是想到我的想法，但如果你正确地设置你的html，你甚至可以使用CSS扩展描述框的大小：悬停或你的描述可能是复选框的标签，当你点击标签时它设置复选框：选中状态，允许您的CSS扩展您的描述。

只需几种方法即可解决您的问题。如果您有任何疑问，请发表评论..

Answer 2

我使用此链接来实现这种功能：

http://sim.plified.com/2008/09/15/sliding-content-from-a-partial-height-with-jquery/

哪个链接来自

http://spoonfedproject.com/jquery/jquery-slide-with-minimum-height/

我希望这个帮助

显示和隐藏div以缩短动态文本

2 个答案: