单击图像块时在图像块下显示文本块

Question

我希望有一个图像块覆盖文本块，即文本块上的图像块 当我单击图像时，它应该显示文本块，图像块变为隐藏（可能是更多地展开文本块以显示内容）。

请注意，文字div在图像div下应该是不可见的，点击它应该显示的图像，图像将隐藏：

JAVASCRIPT：

$(function(){ 
    $('.close').click(function(){ 
        $('#textDiv').show(); 
        $('#imageDiv').hide(); 
    }); 
 }) 

HTML：

<div id="imageDiv" >
   <a href="#" class="close">Close <img src="images/close.png" class="close"></a>
</div> 

<div id="textDiv" style="display:none;">This is the text for the image </div>

Answer 1

您想要这样，请查看DEMO http://jsfiddle.net/yeyene/gNQVR/1/

JQUERY

$('#imageDiv img').on('click', function(){
    $(this).hide();
    $(this).siblings('#textDiv').show();
});
$('#textDiv .close').on('click', function(){
    $(this).parent('#textDiv').hide();
    $(this).parent().siblings('img').show();
});

HTML

<div id="imageDiv" >
   <img src="http://wallpaper-fullhd.com/wp-content/uploads/2013/03/at-the-beach-hd-wallpaper-1920x1200.jpg" class="close" width="200" height="200">
   <div id="textDiv">
       <a class="close">x</a>
       This is the text for the image. ...</div>
</div> 

Answer 2

执行以下操作：http://jsfiddle.net/rBxeY/

$('div').click(function(){
   $('div').toggleClass('active'); 
});

HTML

<div id="imageDiv" class="active">
    <a href="#" class="close">Close <img src="images/close.png" class="close" /></a>
</div> 

<div id="textDiv" >This is the text for the image </div>

CSS

.active{
    display: none;
}