如何实现“阅读更多"内容.与jQuery链接 [英] How to implement a "read more" link with jQuery

问题描述

默认情况下，我希望能够显示长文本字段的简化版本，但是要有一个阅读更多"链接，以将其扩展为完整版本.我现在有一个非常简单的设置，但是感觉应该有一种更有效的方法.

I want to be able to display a shortened version of a long text field by default, but then have a "read more" link that would expand the field to its full version. I have a pretty simple setup right now, but feel like there should be a more efficient way of doing this.

这是我当前的代码:

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

这有效，但似乎很笨重.例如，最好不要使原始文本短暂地闪烁或消失，而只是平滑地扩展.有什么建议吗?

This works, but seems clunky. For example, it would be nice to have the original text not flicker or disappear briefly, but instead just smoothly expand. Any suggestions?

推荐答案

有一个为此的插件.不要重新发明轮子.

There's a plugin for that. Don't reinvent the wheel.

这篇关于如何实现“阅读更多"内容.与jQuery链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！