Question

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

这是我目前的代码：

$(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');
    });
});

这很有效，但看起来很笨重。例如，让原始文本不闪烁或短暂消失会很好，但只是平滑地扩展。有什么建议吗？

Answer 1

有a plugin for that.不要重新发明轮子。

Answer 2

来自 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>

Answer 3

您可以将文本放在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 ref是here。

Answer 4

检查这些插件。您可以轻松完成此操作。

jQuery Expander

Readmore.js

Simple Jquery and CSS usage.Not the plugin

如何使用jQuery实现“read more”链接

4 个答案: