閱讀更多/更少的滑動切換問題？

Question

我不能這個切換閱讀更多或更少的滑動切換工作。我非常接近，但我不確定如何顯示#show-about定位點，因此它首先顯示"read more"？

JSFiddle

$('#show-about').click(function(e){ 
e.preventDefault(); 
$('#about-hidden').slideToggle(); 
$(this).text($(this).text() == 'Read More' ? "Show Less" : "Read More"); 
}); 

Answer 1

只需更改標記中的原始文本即可。

<a href="#" id="show-about">Read More</a> 

http://jsfiddle.net/xhLU7/4/

Answer 2

變化：

<a href="#" id="show-about">More...</a> 

到：

<a href="#" id="show-about">Read More</a> 

jsFiddle example

看來您的問題源於$(this).text() == 'Read More' ? "Show Less" : "Read More"，而您的鏈接的文本爲More...。當您點擊鏈接時，$(this).text()等於More...，但是您將其與Read More進行比較，因此請更改鏈接以匹配該鏈接，並且您沒有問題。

Answer 3

你可以做到這一點使用jQuery，如：

JS

$('#show-about') 
    .text('Read More') 
    .click(function (e) { 
     e.preventDefault(); 
     $('#about-hidden').slideToggle(); 
     $(this).text($(this).text() == 'Read More' ? "Show Less" : "Read More"); 
}); 

演示：Fiddle

---

但是，如果你可以修改HTML標記，並有充分的接取到它，你可以這樣做：

HTML

<a href="#" id="show-about">Read More</a> 

Answer 4

爲什麼你只是沒有寫錨「閱讀更多「而不是」更多...「？