javascript - 定位绝对div并在div外部切换

<div id="menu">
    HERE
</div>

<div id="menu2">
    <span id="one" class="menu2">1. one </span>
    <span id="two" class="menu2">2. two </span>
</div>

#menu {
background-color: red;
width: 100px;
height: 100px
}
#menu2 {
    display: none;
    background-color: green;
    position: absolute;
}


$('#menu').live('click', function(e) {
    $('#menu2').toggle();
});

$('.menu2').live('click', function(e) {
    $('#menu').html($(this).attr('id'));
});

如何在单击的地方设置.menu2？
如果我在#menu外部单击，如何隐藏＃menu2？另外，如果我单击.menu2

实时示例：http://jsfiddle.net/FhVgp/

最佳答案

jsFiddle demo

$('#menu').bind('click', function(e) {
    e.stopPropagation();
    var posX = e.pageX;
    var posY = e.pageY;

    $('#menu2').toggle().css({left: posX, top: posY });
});

$('.menu2').live('click', function(e) {
    $('#menu').html($(this).attr('id'));
});

$(document).bind('click', function() {
    if ($('#menu2').is(':visible')) {
        $("#menu2").hide();
    }
});