jquery - 幻灯片切换 jQuery 函数

Question

我正在尝试显示一段文本，然后下面是一个“阅读更多”链接，当我单击该链接时，更多文本应该向下滑动，并且该链接的文本应该是“阅读更少” ”，然后当他们单击该按钮时，文本应该向上滑动，并且链接文本再次变为“阅读更多”。

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

有人发现任何问题吗？

Answer 1

来 self 的评论:

好吧，措辞仅在一个方向发生变化，因此它永远不会返回“阅读更多”。除此之外，如果能看到附带的 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. 点击事件绑定(bind)到 #more 元素，点击时会触发该函数。
2. 触发时，#the_more 元素会向上或向下滑动、切换，具体取决于其可见状态。
3. slideToggle() 完成后会触发回调以更改文本
4. #the_more 中的文本使用 .text() 的功能变体进行更改函数，将当前文本值传递给函数进行更改。
5. 文本函数只是一个 ternary-if检查 #the_more 中文本的当前值，如果当前为“阅读更多”，则变为“阅读更少”，反之亦然，这是文本的切换。

希望有帮助。