slideToggle jQuery功能

Question

我试图显示一段文字，然后下面是一个“阅读更多”的链接，当我点击链接，更多的文本应该滑下来，链接的文本应该阅读“读都不能少”，然后当他们点击，文本应该滑回并链接文本是“更多”再次..

$('#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()完成之后发生改变内#the_more文本是使用.text()功能的功能性变体改变了文本
4. ，这通过当前的文本值到该函数用于改变的回调被激发。
5. 文本函数只是一个ternary-if，它检查#the_more中文本的当前值，如果它当前是“Read More”，则它变为“Read Less”，反之亦然，文本切换。

希望有所帮助。