使部分隐藏的div显示全部内容

Question

如果您能为我找到解决方案，我将不胜感激。 我有部分隐藏的div中的文章列表（div为200px高）。 当我单击readmore时，它应该很好地向下滑动以显示其余内容。

这是html：

<style>
    .content {height:200px;}
</style>    
<div class="content_1">Full text here...</div><a href="" class="readmore"></a>
<div class="content_2">Full text here...</div><a href="" class="readmore"></a>
<div class="content_3">Full text here...</div><a href="" class="readmore"></a>
</div>

这是jquery代码（它仅适用于content_2：

var len = $('.wrap > .content').length;
  $("a.readmore").click(function(event){
    var hiddenContent = $(".wrap > .content_2");
   event.preventDefault();
   hiddenContent.animate({
    height: '500px'
  }, 1000, function() {
    // Animation complete.
  });

  });

如何遍历“ .content _” + i，以便使其适用于我单击的特定div？ 我尝试与每个循环，等等...但是我没有运气

Answer 1

您可以非常简单地选择jQuery中的上一个元素。 这是一个脚本，它将显示内容，如果用户第二次单击readmore链接，则将其隐藏。 它还会更改链接标签。 jQuery使一切变得非常简单：

$("a.readmore").click(function(e){
    if($(this).prev("div.content").hasClass("open")){
        $(this).prev("div.content").animate({"height":50}).removeClass("open");
        $(this).html("More...");
    }else{
        $(this).prev("div.content").animate({"height":500}).addClass("open");
        $(this).html("Less...");
    }

    e.preventDefault();
});

这是为您提供的jsfiddle实时示例： http : //jsfiddle.net/JmLqp/