javascript - 显示和隐藏 div 用于缩短动态出现的文本

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 来扩展描述框的大小:悬停或者你的描述可以是复选框的标签，当你点击标签时它会设置复选框:checked 状态允许您的 css 扩展您的描述。

只是解决您的问题的其他几种方法。如果您有任何问题，请发表评论..