Question

jquery 点击元素以外任意地方隐藏该元素的方法

$(".select_box").click(function(){
$(".option").show();
})
$(document).click(function(){
if($(".option").css('display')=='block'){
$(".option").hide();
}
});

这样不行啊,点击select_box时也会触发第二个事件,请大神来指导一下...在线等

Answer 1

你试试在第一个后面加上 return false;

Answer 2

首先：1楼的答案虽然在单个点击上没问题，但是如果有多个同样功能的按钮时就无法达到切换的效果（因为已经阻止了冒泡），所以如果是多个按钮的情况，答案还少了点东西。

下面是我的代码：

var btn=$("#btn_id");//按钮
var div=$("#div_id");//要显示或隐藏的对象
//点击事件
btn.on("click",function(e){
    show_or_hide(div,e);
});
//显示或隐藏的函数
function show_or_hide(obj,e){
    //判断是否隐藏状态
    if(obj.is(":hidden")){
        //先触发一次document的点击事件（这样其他按钮的隐藏就被触发了）
        $(document).click();
        //阻止冒泡,避免在触发显示的时候马上触发下面的document点击事件
        e.stopPropagation();
        //显示
        obj.show();
        //添加document事件,这里我由于把添加事件放在了按钮点击事件处理里，所以使用的是一次性的事件（可以放到外面）
        $(document).one("click",function(e){
            obj.hide();
        })
    }
}