使用 jquery 显示/隐藏多个 div

Question

我对 jquery 很陌生，我理解其中的一些，但这对我打击很大。 所以我环顾四周寻找答案，但也许我试图过于具体。

这是我使用的 jquery 代码：

$(document).ready(function(){

    $(".slidingDiv").hide();
    //hides the div 

    $(".show_hide").show();
    //click on the img to show hidden div 

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle("slow");

});


heres example of the html :

<div class">


<img height="300" width="350" src="images/web.png" alt="design 1"  class=" show_hide img-responsive center-block wow fadeIn" href="#"/>
<br>

</div>  

when i click this image , it toggles the hidden div :

<div class="slidingDiv">


          <div>


      <img height="300" width="350" src="images/web.png" alt="design 1"  class="img-responsive center-block" />

          </div>
</div>

css: 

.slidingDiv{
height:400px;
background-color:black;
padding:50px;
margin-top:10px;
margin-bottom: 35px;
border-bottom:1px solid #3399FF;
}

.show_hide{
display:none;
}

当我将“show_hide”类添加到我想要使用的图像时，这非常有效，然后当我添加类“slidingDiv”时，div 会很好地显示在上方，但是我如何使用 jquery 将其实现到多个具有不同 div 的图像中?

我今天刚刚在堆栈注册，如果我做错了什么。

Answer 1

这是你可以做的，

$(document).ready(function(){

    $(".slidingDiv").hide();
    //hides the div 

    $(".show_hide").click(function(){
        $(".slidingDiv").show("slow"); 
    });


});

这是一个演示

如果要在单击单个图像时使多个 div 出现和消失，可以将类slidingDiv添加到这些 div

<div class="slidingDiv">
    text text text text text text text
    text text text text text text text
    text text text text text text text
    text text text text text text text
    text text text text text text text
    text text text text text text text
    text text text text text text text
    text text text text text text text
</div>
<div class="slidingDiv">
    text text text text text text text
    text text text text text text text
</div>
<div class="slidingDiv">
    text text text text text text text
    text text text text text text text
</div>

多张图片演示

Answer 2

使用您拥有的HTML设置，您将需要向上导航，然后导航到同级.slidingDiv像

$('.show_hide').click(function() {
        $(this).closest('div').next(".slidingDiv").slideToggle("slow");
      });

 $(document).ready(function() { $(".slidingDiv").hide(); //hides the div $(".show_hide").show(); //click on the img to show hidden div $('.show_hide').click(function() { $(this).closest('div').next(".slidingDiv").slideToggle("slow"); }); });

 .slidingDiv { height: 75px; background-color: black; padding: 50px; margin-top: 10px; margin-bottom: 35px; border-bottom: 1px solid #3399FF; } .show_hide { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div> <img height="30" width="35" src="images/web.png" alt="design 1" class=" show_hide img-responsive center-block wow fadeIn" href="#" /> <br> </div> <div class="slidingDiv"> <div> <img height="30" width="35" src="images/web.png" alt="design 1" class="img-responsive center-block" /> </div> </div> <div> <img height="30" width="35" src="images/web.png" alt="design 1" class=" show_hide img-responsive center-block wow fadeIn" href="#" /> <br> </div> <div class="slidingDiv"> <div> <img height="30" width="35" src="images/web.png" alt="design 1" class="img-responsive center-block" /> </div> </div>

Answer 3

虽然您似乎已经找到了您的解决方案，但为您提供了另一种选择，即如果您首先感兴趣，这是我能够制作的。 请注意，这是一个过于简单的示例，目的是为您提供一个想法。

它的工作方式是从可点击的元素中获取被点击元素的index()并将此index()应用于需要借助eq()进行动画处理的其他元素集方法。

JavaScript：

$(document).ready(function(){
    $('.image-container').on('click',function(){
        $('.sliding-div').eq($(this).index()).stop().slideToggle();
    });
});

使用这种方法的好处是您不必重复代码。 另一个好处是，您的sliding-div元素不必与 HTML 中的image-container元素保持接近，它们可以位于标记中需要的任何位置。 但缺点是它严格依赖于 HTML 标记的布局顺序。 因此，例如，如果单击image-container元素中的第二个元素，则sliding-div元素中的第二个元素将被动画化。

希望这在某种程度上有所帮助。