javascript - 显示/折叠文本

Question

jsfiddle 中的结果可能不起作用，但它在我的文档中起作用。

http://jsfiddle.net/hXzrA/

有效的是我的文本是隐藏的，当我点击阅读更多...时，它会显示段落中的更多文本。如果我再次点击阅读更多...，它会将段落中的文本折叠回正常状态。

我一直想弄清楚的是:

1. 将鼠标悬停在阅读更多.... 链接上。有点像蓝色突出显示，以便人们知道它是鼠标悬停。

2. 显示文本时，Read More... 文本应该消失，并且在现在显示的文本底部，应该是Collapse text...(鼠标悬停时相同的蓝色突出显示)。 Collapse 应该将文本恢复到它的折叠状态。 我如何实现这一目标:

   $(document).ready(function(){
   
     var open = false;
     $('.reveal').click(function() {
       if (open) {
         $(this).animate({height:'20px'}); 
       }
       else {
         $(this).animate({height:'100%'});
       }
       open = !open;
     });
   });
   

3. 此外，如果您能够让文本在显示/隐藏时内爆/爆炸，那也太棒了。我一直在尝试，但无法做到这一点。

Answer 1

看看这个 fiddle 可以多么简化:http://jsfiddle.net/syEM3/

Javascript:

$('.reveal').click(function() {
    $(this).next().slideToggle();
});

编辑: 对于显示/折叠的效果:

$('.reveal').click(function() {
    $(this).slideUp(100).next().slideToggle();
    $(".collapse").slideDown(100);
});

$('.collapse').click(function() {
    $(this).slideUp(100).prev().slideToggle();
    $(".reveal").slideDown(100);
});