jquery - 显示隐藏多个div

Question

这个想法是，当我点击一张图片时，会显示另一张图片和一些文字。我已经成功了:

Jquery

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

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

});

HTML

  <a href="#" class="show_hide"
   ><img src="images/owl.png" id="owl" width="200" height="200"  alt="owl"></a>


  <div class="slidingDiv">
  Philip to the rescue!! <img src="images/cola.jpg"
     width="256" height="320" alt="cola  Philip">
  <a href="#" class="show_hide">Hide</a></div>

CSS

.slidingDiv {
   height:300px;
   padding:20px;
   margin-top:10px;
}

.show_hide {
   display:none;
}

但是我有点困惑如何用多张图片做到这一点？

例如，如果我有 8 个不同的可点击图像，那么将显示 8 个不同的图像和文本。

还有，有什么办法让它上升而不是下降吗？

Answer 1

一个优雅的解决方案是像这样包装切换链接和切换内容:

<div class="toggler-wrap">
    <a href="#" class="toggler">Toggle content</a>
    <div class="content">This text can be toggled.</div>
</div>

然后您可以使用以下代码切换任何内容 div:

$(function(){
    $('.toggler').click(function(event){
        event.preventDefault();
        $(this).parent().find('.content').slideToggle();
    });
});

参见http://jsfiddle.net/TW5Eq/举个例子! 祝你练习愉快!