请参阅javascript的更多信息 - See More with javascript

See More with javascript

本文关键字：信息 javascript 请参阅 | 更新日期: 2023-09-27

我从数据库中检索注释，并显示具有字符限制的注释，直到105

我使用这个代码<td>{$users.COMMENT|truncate:105:"..."}</td>

我想要的是，如果注释大于105，则将其截断为105个字符，并加上复选框。如果不加，则不加复选框。

如果用户单击复选框，行将变大，用户将看到完整的注释。

我该怎么做？

HTML代码：

 <div id="container">
     <input type="checkbox" onclick="javascrpt: $('#container').toggleClass('active')">
     <div class='comment_short'>short comment </div >
     <div class='comment_full'>very loooooong comment very loooooong comment  very loooooong comment  very loooooong comment </div >
</div>

CSS代码：

div#container.active div.comment_full {
    display: block;
}
div#container div.comment_full {
    display: none;
}

以下是示例http://jsfiddle.net/guTMs/1/

最简单的方法是使用隐藏元素。

<td>
 <span class='comment_short'>{$users.COMMENT|truncate:105:"..."}</span>
 <span class='comment_full' style='display:none'>{$users.COMMENT}</span>
</td>

然后，单击复选框时，可以切换每个图元的可见性。

将剩余文本放在<span style="display:none" id="more_text">标签和更多按钮上，写下以下内容：

<button name="more" value="more" onclick="document.getElementById('more_text').style.display = 'block'">