显示和隐藏动态出现的文本的Div

Show and Hide Div for the text that comes dynamically

本文关键字：文本 Div 隐藏 动态 显示      更新时间：2023-10-26

我遇到了一个问题，我们必须在产品详细信息页面的产品描述中显示/隐藏一些文本。描述必须缩短到所需的行数，点击"更多"即可显示完整的描述。我从下面的链接中获得了以下脚本：

使用JavaScriptsubstring（）创建更多阅读链接

代码如下：

<script type="text/javascript">
    $(function() {
        var cutoff = 200;
        var text = $('div.contentdetail').text();
        var rest = $('div.contentdetail').text().substring(cutoff);
        if (text.length > 200) {
          var period = rest.indexOf('.');
          var space = rest.indexOf(' ');
          cutoff += Math.max(Math.min(period, space), 0);
        }  
        rest = text.substring(cutoff);  
        var visibleText = $('div.contentdetail').text().substring(0, cutoff);  
        $('div.contentdetail')  
            .html(visibleText + ('<span>' + rest + '</span>'))
            .append('<a title="Read More" style="font-weight:bold;display:block;cursor: pointer;">Read More&hellip;</a>')  
            .click(function() {  
                $(this).find('span').toggle();  
                $(this).find('a:last').hide();  
            });  
        $('div.contentdetail span').hide();  
    });  
</script>

但通过上面的脚本，整个描述都转换为文本格式。但由于描述中包含无序列表、头标记等，因此不考虑这些。如何修改上面的脚本以按原样显示内容。

使用html（）而不是text（）。像这个

var text = $('div.contentdetail').html();
var rest = $('div.contentdetail').html().substring(cutoff);

休息是完全正确的。text（）将所有html节点数据转换为纯文本。html（）保留了它。试试看，对我有用。在上一个链接中，问题只针对文本。由于您有其他元素，如链接和其他内容，因此需要使用html（）

相关文章：