slideToggle jQuery函数

我正在尝试显示一段文字，然后在下面是一个“阅读更多”链接，当我点击链接时，更多的文本应该向下滑动，链接的文本应该是“Read less”，然后当他们点击它时，文本应该向上滑动，链接文本再次“读取更多”。

$('#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. click事件绑定到#more元素，单击该函数时会触发。
2. 触发后， #the_more元素会向上或向下滑动，切换，具体取决于它的可见性状态。
3. 完成slideToggle()后更改文本时会触发回调
4. #the_more的文本使用.text（）函数的函数变量进行更改，这会将当前文本值传递给函数进行更改。
5. 文本函数只是一个三元 – 如果它检查#the_more本的当前值，如果它当前是’Read More’则变为’Read Less’，反之亦然，即文本的切换。

希望有所帮助。