slideToggle jQuery函数

Question

slideToggle jQuery函数

4

我正在尝试显示一段文本，然后在下面是一个“阅读更多”的链接，当我点击链接时，更多的文本应该滑下来，链接的文本应该为“收起”，然后再次点击时，文本应该向上滑动，链接文本变为“阅读更多”。

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

有人发现任何问题吗？

- benhowdle89

好的，措辞只会单向更改，因此它永远不会返回到“阅读更多”。除此之外，看到伴随其的HTML将是很好的。 - Orbling

看起来对我来说没问题，但如果你发布了这个问题，我想你一定遇到了问题？这段代码在哪里？ - jon_darkstar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Orbling · Accepted Answer

来自我的评论：

好吧，措辞只会单向更改，所以它永远不会返回到“阅读更多”。除此之外，看到伴随的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/

代码的工作原理如下。

将点击事件绑定到#more元素，当单击时触发函数。
触发时，#the_more元素向上或向下滑动，根据其可见性状态进行切换。
slideToggle()完成后触发回调函数以更改文本
使用.text（）函数的功能变体更改#the_more中的文本，这将当前文本值传递给用于更改的函数。
文本函数只是一个三元-if，用于检查#the_more内文本的当前值，如果当前为“阅读更多”，则变为“阅读较少”，反之亦然，文本的切换。

希望能够帮助到您。