使用 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元素中的第二個元素將被動畫化。

希望這在某種程度上有所幫助。