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