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

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

代码如下：

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();
        }
    });
};

jQuery.fn.shorten=函数（设置）{
变量配置={
showChars:100，
省略文本：“…”，
moreText:“更多”，
lessText：“更少”
};
如果（设置）{
$.extend（配置、设置）；
}
$（'.morelink'）.live（'click'，函数（）{
var$this=$（this）；
if（$this.hasClass（'less'））{
$this.removeClass（'less'）；
$this.html（config.moreText）；
}否则{
$this.addClass（'less'）；
$this.html（config.lessText）；
}
$this.parent（）.prev（）.toggle（）；
$this.prev（）.toggle（）；
返回false；
});
返回此。每个（函数（）{
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+''+config.ellipseText+''+h+''；
$this.html（html）；
$（“.morecontent span”）.hide（）；
}
});
};

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

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

$（文档）.ready（函数（）{
$（“.comment”）.shorten（）；
}); 

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

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

---

由于详细信息来自后端，底层的动态div以及其中的无序列表不会受到影响。请向我建议一些实现此功能的方法。

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

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

然后，您可以添加“阅读更多”按钮，或单击以展开交易类型，然后展开要完整查看的内容。我只是在想，但是如果你把你的html布局正确，你甚至可以使用CSS来扩展描述框的大小：hover或者你的描述可以是复选框的标签，当你点击标签时，它会设置复选框：checked状态，允许你的CSS扩展你的描述

---

只是用另外两种方式来解决你的问题。如果您有任何问题，请发表意见。

您打电话来怎么样。shorten（）；插入动态div之后？i、 在内容被拉入页面后，我将使用@UmairP-call shorten（）返回。