我希望能够在默认情况下显示长文本字段的缩短版本,但是然后有一个"阅读更多"链接,将该字段扩展到其完整版本.我现在有一个非常简单的设置,但感觉应该有一个更有效的方法来做到这一点.
这是我目前的代码:
$(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食谱:
<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>
您可以将文本放在 div 中，并将第一部分直接放在 div 中，其余部分放在 div 中
<div>
first part of the text
<span id="expendable" style="display:none">
second part of the text
</span>
</div>
在 Jquery 中你可以这样做：
$("expendable").slideToggle("slow");
Jquery 参考在这里。