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.
  });

  });

如何迭代＆＃34; .content _＆＃34; +我这样我可以让它适用于我点击的特定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/

使部分隐藏的div显示完整内容

1 个答案: