Jquery 制作一个部分隐藏的div以显示全部内容

如果你能为我找到解决办法，我将不胜感激。我有一个文章列表，每一篇都在一个部分隐藏的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>

如何迭代.content_ui+I，以便使其适用于我单击的特定div？

---

我试着对每个元素进行循环，例如等等……但是我没有运气

你可以在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();
});

---

这里有一个JSFIDLE live示例：

您应该使用ID的类和应该使用ID的类。。。。。ID应该是唯一的，并且类可以在多个DOM元素上使用。Sim是否也不知道从何处加载内容？包裹在哪里？也许可以尝试添加一个帮助我们了解您的问题？是的..对不起。这是我只在这里打的一个错字。正在从文章数据库加载内容。它加载完整的节点，而不是修剪的节点，但它隐藏了其中的一部分，并在单击“阅读更多”后将其显示。谢谢，你让我度过了美好的一天。我仔细检查了您的代码，实际上prev函数在这里非常有用。祝福你！

$("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();
});