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()完成后会在更改文本
后触发回调
4. 使用.text()函数的功能变体更改#the_more中的文本，这会将当前文本值传递给要更改的函数。
5. 文本函数只是一个ternary-if，可以检查#the_more中文本的当前值，如果它当前是'Read More'则变为'Read Less'，反之亦然，切换为文本。

希望有所帮助。