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」，反之亦然，文本切換。

希望有所幫助。