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

Question

<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/

Answer 1

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();
    }
});