顯示隱藏的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(); 
} 
)