gpt4 book ai didi

javascript - 展开 div 到 "read more"

转载 作者:行者123 更新时间:2023-11-29 05:25:01 25 4
gpt4 key购买 nike

我在我的网站上遇到了一个问题,我正在寻找解决方案。帖子是从 MySQL 数据库中获取的。如果它包含几行,则完全显示。但是,如果它包含太多行(因此在浏览器屏幕上占用更多空间),那么我希望它显示为单行后跟点(例如,您的太长的帖子....) 通过单击显示整个帖子的“查看更多”选项(如在 facebook、twitter 等中看到的那样)。它是通过 javascript 或 jquery 的客户端解决方案,还是可以通过 PHP 在服务器端处理。非常感谢您的建议!

整个帖子是从 MySQL 中提取的,我直接附和了它:

<?php
//code
while($row=mysql_fetch_array($result))
{
echo $row['posts'];
}
?>

此时我只是从数据库中获取整个帖子并回显它。我想要一个 javascript 解决方案来完成剩下的工作。

最佳答案

你可以用 jquery 做到这一点:-

<div class="columns">
your text goes here. Try long text here....
</div>

a.morelink {
text-decoration: none;
outline: none;
}

.morecontent span {
display: none;
}

.comment {
width: 400px;
background-color: #f0f0f0;
margin: 10px;
}

<script>
var showChar = 120;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";

$(".columns").each(function () {
var content = $(this).html();

if (content.length > showChar) {
var first = content.substr(0, showChar);
var second = content.substr(showChar - 1, content.length - showChar);

var html = first + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + second + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

$(this).html(html);
}
});

$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
</script>

关于javascript - 展开 div 到 "read more",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21186619/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com