点击空白处隐藏指定元素

html部分

    
模块一
    
模块二
    
模块三
    
模块四


    

        
子模块一
        
子模块二
        
子模块三
    

加点简单的样式

.content p{
    width:100px;
    display: inline-block;
    text-align: center;
}

js部分

$("#module").hide();
$("#one").click(function(){
    var showFlag=$("#module").attr("data-show");
    if(showFlag=='true'){
        $("#module").show();
        $("#module").attr("data-show","false");
    }else{
        $("#module").hide();
        $("#module").attr("data-show","true");
    }
})
$(document).bind("click",function(e){
    var target  = $(e.target);    //e.target获取触发事件的元素
    //从触发事件的元素向上找父元素  判断点击的部分是否是父元素或者本身  如果长度为0 说明点击的是空白不相关部分
    if(target.closest("#module,#one").length == 0){
        $("#module").hide();
        $("#module").attr("data-show","true");
    };
})