slideToggle jQuery函数

Question

我正在尝试显示一段文字,然后在下面是一个"阅读更多"链接,当我点击链接时,更多的文本应该向下滑动,链接的文本应该读作"Read Less",然后当他们点击它时,文本应该向上滑动,链接文本再次"Read More".

$('#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. #the_more使用.text()函数的函数变量更改其中的文本,这会将当前文本值传递给函数以进行更改.
5. 文本函数只是一个三元 - 如果它检查文本的当前值,#the_more如果它当前是'Read More',它变为'Read Less',反之亦然,是文本的切换.

希望有所帮助.