gpt4 book ai didi

jquery - 如何使用 jQuery 实现 "read more"链接

转载 作者:行者123 更新时间:2023-12-03 22:28:28 26 4
gpt4 key购买 nike

我希望能够默认显示长文本字段的缩短版本,但随后有一个“阅读更多”链接,可以将该字段扩展为其完整版本。我现在有一个非常简单的设置,但感觉应该有一种更有效的方法来做到这一点。

这是我当前的代码:

$(document).ready(function () {

$("#narrative-full").hide();

$("a#show-narrative").click(function() {
$("#narrative-short").hide();
$("#narrative-full").show('fast');
});
$("a#hide-narrative").click(function() {
$("#narrative-full").hide();
$("#narrative-short").show('fast');
});
});

这可行,但看起来很笨拙。例如,如果原始文本不闪烁或短暂消失,而是平滑地展开,那就太好了。有什么建议吗?

最佳答案

来自jQuery Recipes :

<html>
<head>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".message").hide();
$("span.readmore").click(function(){
$(".message").show("slow");
$(this).hide();
});
});
</script>
</head>
<body>
<div>
Styles make the formatting job much easier and more efficient.
</div>
<span class="readmore">Read More...</span>
<div class="message">
To give an attractive look to web sites, styles are heavily used.
JQuery is a powerful JavaScript library that allows us to add dynamic elements to our web
sites. Not only it is easy to learn, but it's easy to implement too. A person must have a
good knowledge of HTML and CSS and a bit of JavaScript. jQuery is an open source project
that provides a wide range of features with cross-platform compatibility.
</div>
</body>
</html>

关于jquery - 如何使用 jQuery 实现 "read more"链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3553308/

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