Question

jQuery 怎么实现点击页面其他地方隐藏菜单

Answer 1

需要通过Jquery来实现这种点击页面其他地方隐藏菜单的效果，重要的一点就是需要通过event.stopPropagation()来阻止事件冒泡：

<p><a href="javascript:void(0)" class="a">菜单按钮</a></p>
<div class="menu">
<a href="http://www.baidu.com">百度</a>
</div>

//绑定按钮事件，点击按钮可以打开菜单，同时也能关闭按钮
$(".a").on("click", function(e){
    if($(".menu").is(":hidden")){
        $(".menu").show();
    }else{
    	$(".menu").hide();
    }    
    //给document绑定一个一次性的click事件，点击关闭菜单
    $(document).one("click", function(){
        $(".menu").hide();
    });

    e.stopPropagation();
    });
    
    //通过e.stopPropagation()来保证点击菜单不会关闭菜单
    $(".menu").on("click", function(e){
        e.stopPropagation();
    });