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

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/

查询

$('#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;
}