4

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

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

有人发现任何问题吗？

4

1 回答 1

6

从我的评论：

好吧，措辞只在一个方向上改变，所以它永远不会回到“阅读更多”。除此之外，很高兴看到随附的 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. text 函数只是一个三元函数，它检查文本的当前值，#the_more如果它当前是“阅读更多”，则变为“阅读更少”，反之亦然，切换文本。

希望有帮助。

于 2010-11-27T18:49:27.043 回答