滑动切换 jQuery 函数

Posted 2023-02-25

【中文标题】滑动切换 jQuery 函数

【英文标题】：slideToggle jQuery function

【发布时间】：2010-11-27 18:44:22

【问题描述】：

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

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

有人发现任何问题吗？

【问题讨论】：

好吧，措辞只在一个方向上改变，所以它永远不会回到“阅读更多”。除此之外，很高兴看到随附的 HTML。

对我来说看起来不错，但我想如果您发布此内容一定有问题？这段代码在哪里？

【参考方案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/

代码如下。

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

希望对您有所帮助。

【讨论】：

几乎！除了将“阅读更多”和“阅读更少”放在错误的位置之外？？

现在明白了，很棒的代码，你介意再解释一下，尤其是返回文本行...

您是从第一次点击阅读更多内容开始的吗？

我已经用完整的解释和 jsfiddle 中的演示扩展了我的答案，供您使用。