Question

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

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

我一直想弄清楚的是：

鼠标悬停在阅读更多.... 链接上。有点像蓝色突出显示，以便人们知道它的鼠标悬停。
当文字显示时，阅读更多... 文字应该消失，在现在显示的文字的底部，应该是折叠文字...... （鼠标悬停时相同的蓝色突出显示）。折叠应该将文本恢复到崩溃状态。我如何实现这一目标：
```
$(document).ready(function(){

  var open = false;
  $('.reveal').click(function() {
    if (open) {
      $(this).animate({height:'20px'}); 
    }
    else {
      $(this).animate({height:'100%'});
    }
    open = !open;
  });
});
```
另外，如果你能够在揭示/隐藏中获得文本内爆/爆炸，那也会很棒。我一直在努力尝试，但无法做到这一点。

Answer 1

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

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 .readless / open。

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

Answer 4

坚持：将鼠标悬停在您的选择器上，然后将规则放入悬停状态。那应该是你的css，而不是jquery函数。

用一个类包围你的“Read More”文本并在jquery中，在上面的click函数中你可以做类似的事情： $（ 'spanClass'）隐藏（）;

恰恰相反： $（ 'spanClass'）显示（）;

显示/折叠文本

4 个答案: