html部分

<div class="content">
    <p id="one">模块一</p>
    <p>模块二</p>
    <p>模块三</p>
    <p>模块四</p>
</div>
<div id="module" data-show="true">
    <ul>
        <li>子模块一</li>
        <li>子模块二</li>
        <li>子模块三</li>
    </ul>
</div>

加点简单的样式

.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");
    };
})