slideToggle jQuery函数

Question

我正在尝试显示一段文本，然后下面是一个“阅读更多”链接，当我单击该链接时，更多的文本将滑下，链接的文本将显示为“阅读更少”，然后当他们单击该链接时，文本将滑回，链接文本将再次显示为“阅读更多”。

$('#more').click(function() {
                $('#the_more').slideToggle("slow", function () {
                      $('#more').html("Read Less");
                    });
});

有人发现什么问题了吗？

Answer 1

来自我的评论：

好的，措辞只在一个方向上改变，所以它永远不会返回到“阅读更多”。除此之外，如果能看到它附带的HTML就更好了。

以下是一些可能工作的代码，等待看到HTML。

$('#more').click(function() {
    $('#the_more').slideToggle("slow", function () {
        $('#more').text(function (index, text) {
            return (text == 'Read More' ? 'Read Less' : 'Read More');
        });
    });

    return false;
});

演示：http://jsfiddle.net/yLvms/

代码的工作方式如下。

1. 单击事件绑定到#more元素，单击时函数将触发。
2. 触发时，#the_more元素会上下滑动，并根据其可见性状态进行切换。
3. 在slideToggle()完成后会触发回调，该回调会更改文本<代码>H211<代码>H112使用<代码>C14函数的函数变体更改<代码>D13内的文本。这会将当前文本值传递给changing.
4. The的函数文本函数只是一个ternary-if，它检查#the_more中文本的当前值，如果它当前是“多读”，它就会变成“少读”，反之亦然，这是文本的切换。

希望这能有所帮助。