1

我有一个问题，我们必须在产品详细信息页面的产品描述中显示/隐藏一些文本。描述必须缩短到所需的行数，并通过单击“更多”来显示完整的描述。我想实现它，如下面的 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 以及其中的无序列表都没有受到影响，请建议我一些方法来实现这个功能。

4

1 回答 1

0

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

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

然后，您可以添加阅读更多按钮，或单击以展开交易类型，然后将展开内容以完整查看。只是在我的脑海中思考，但是如果您正确布置了 html，您甚至可以使用 CSS 来扩展 :hover 上描述框的大小，或者您的描述可能是复选框的标签，当您单击标签时，它会设置复选框:checked 状态允许您的 css 扩展您的描述。

解决您的问题的另一种方法。如果您有任何问题，请发表评论..

于 2012-11-15T14:32:57.043 回答