Question

所以我要做的是：

HTML code：

<div class="div_with_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue 
lectus sed tortor placerat quis porttitor dui vehicula. Morbi molestie 
tortor sit amet eros tempor consectetur.
</div>
<div class="show_more_btn">Show more</div>

<div class="div_with_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue 
lectus sed tortor placerat quis porttitor dui vehicula. Morbi molestie 
tortor sit amet eros tempor consectetur.
</div>
<div class="show_more_btn">Show more</div>

<div class="div_with_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue 
lectus sed tortor placerat quis porttitor dui vehicula. Morbi molestie 
tortor sit amet eros tempor consectetur.
</div>
<div class="show_more_btn">Show more</div>

CSS代码：

.showMore
{
    display:block;
}
.div_with_content
{
    display:none;
}

所以我有很多div与类“div_with_content”（女巫没有显示）有一些内容，通常是文本。每个“div_with_content”下面都有一个包含在div“show_more_btn”中的按钮。因此，当我按下div show_more_btn时，将会在showMore类中添加样式（在jQuery中添加addClass）以缓慢显示此div。所以很容易实现：

JS CODE：

$(function() {
        $(".show_more_btn").click(function(event){
               $(".div_with_content").addClass("showMore").show(1500,"swing");
     });
    });

但是只有一个问题：当我按下show_more_btn时，所有div_with_content都会慢慢显示，而不是只有一个精确地超过show_more_btn。所以我想要的是：当我按下“show_more_btn”时，只有“div_with_content”精确地超过“show_more_btn”才会显示其他“div_with_content”仍然不可见。我如何实现这一目标？

Answer 1

您只需修复您的javascript代码，使其仅适用于您想要的div_with_content，而不是全部。试试这个：

$(function() {
        $(".show_more_btn").click(function(event){
               $(this).prev(".div_with_content").addClass("showMore").show(1500,"swing");
     });
    });

Answer 2

http://api.jquery.com/prev/

您正在寻找jquery的prev（）方法。它也将采用一个选择器，并且只选择之前单击的类。

 $(".show_more_btn").click(function(event){
               $(".show_more_btn").prev(".div_with_content").addClass("showMore").show(1500,"swing");

沿着这些方向发展。

Answer 3

您可以使用prev http://api.jquery.com/prev/

$(function() {
     $(".show_more_btn").click(function(event){
               $(this).prev(".div_with_content").addClass("showMore").show(1500,"swing");
     });
});

jQuery show / addClass用于许多具有相同类的div

3 个答案: