显示隐藏的div过电流股利和未来隐藏

Question

<div id="home"> 
    <div id="logo"> </div> 

     <div id="foot"> <div class="button"> CLICK ME</div> 
      <div class="button two"> CLICK ME</div> </div> 
</div> 

<div id="show"> 
    TEST TEST TEST TEST 
</div> 

$('.button').click(function(){ 
    $('#show').show(); 
}) 

#home { 
width: 400px; 
height: 400px; 
background-color: #ccffff; 
} 

#logo { 
    width: 100%; 
    height: 300px; 
    background-color: #0099ff; 
} 

#foot { 
    width: 100%; 
    height: 100px; 
    background-color: #009999; 
} 

.button { 
width: 90px; 
height: 30px; 
background-color: red; 
margin-left: 50px; 
} 

如果我点击.button然后GREEN .show告诉我在红色按钮，红色，并且如果我点击绿色.show那么这个隐藏外面我想。

LIVE：http://jsfiddle.net/YeE4p/1/

Answer 1

这是有点接近你在找什么？ http://jsfiddle.net/neilheinrich/YeE4p/6/

我不得不改变#show的div绝对定位，并使用此javascript：

$('.button').click(function(){ 

    var $show = $('#show'); 
    var position = $(this).offset() 

    $show.css({ 
    "left": position.left + "px", 
    "top":position.top + "px" 
    }).show(); 

    $(window).bind("mousedown", function(e){ 
    if (!($(e.target).attr("id") === "show")) { 
     $("#show").hide(); 
     $(window).unbind("mousedown"); 
    } 
    }); 
}) 

Answer 2

尝试了这一点

http://jsfiddle.net/Quincy/YeE4p/4/

$('.button').click(function(event){ 
    $('#show').show(); 
    event.stopPropagation(); 
}) 

$('body').click(
    function(){ 
    $('#show').hide(); 
} 
)