javascript - 显示/折叠文本

Question

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

http://jsfiddle.net/hXzrA/

起作用的是我的文本是隐藏的，当我单击Read More...时，它会显示段落中的更多文本。如果我再次单击“阅读更多...”，它会将段落中的文本折叠回正常状态。

我一直想弄清楚的是：

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

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

你不能animate，100%你需要先计算元素的原始高度而不是操纵高度。

这是工作的jsFiddle。

var orgHeight = parseInt($('.reveal').css('height'));
$('.reveal').css('height','20px');

$('.reveal').click(function() {
    var target = parseInt($(this).css('height'));

    if (target != orgHeight) {
        $(this).animate({'height':orgHeight+'px'},500);
    }else{
        $(this).animate({'height':'20px'},500); 
    }
});

Answer 2

看看它在这个小提琴中的简化程度：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);
});

Answer 3

对于悬停效果，只需使用 CSS：

.readmore:hover, .readless:hover {
   text-shadow: 2px 2px 3px blue;
}

至于单独的链接，我认为将它们放在您的标记中更容易：

<a class="readmore">Click Here to READ MORE...</a>
TEXT TEXT TEXT
<a class="readless">Collapse Text...</a>

然后只是.show//酌情基于.hide .readmore..readlessopen

http://jsfiddle.net/ExplosionPIlls/hXzrA/4/

Answer 4

在选择器上粘贴 :hover ，然后放置悬停规则。那应该在你的 css 中，而不是 jquery 函数中。

用一个类在“阅读更多”文本周围包裹一个跨度，在 jquery 中，在上面的 click 函数上，您可以执行以下操作： $('spanClass').hide();

恰恰相反： $('spanClass').show();