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獲取觸發(fā)事件的元素
//從觸發(fā)事件的元素向上找父元素 判斷點擊的部分是否是父元素或者本身 如果長度為0 說明點擊的是空白不相關部分
if(target.closest("#module,#one").length == 0){
$("#module").hide();
$("#module").attr("data-show","true");
};
})
