http://www.dotblogs.com.tw/smartleos/archive/2012/12/06/85460.aspx
按這裡就顯示Div
this is a div.
thhhhhhhhhhhhhhh |
tddddddddddddddd |
04 |
<script type= "text/javascript" src= "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js" ></script> |
06 |
<script type= "text/javascript" > |
10 |
$( 'body' ).click( function (evt) { |
11 |
if ($(evt.target).parents( "#divShow" ).length==0 && |
12 |
evt.target.id != "aaa" && evt.target.id != "divShow" ) { |
19 |
<a id= "aaa" name= "aaa" onclick= "$('#divShow').show();" href= "#" >按這裡就顯示Div</a> |
20 |
<div id= "divShow" name= "divShow" style= "width: 500px; height: 350px;border-width:2px; border-style:dotted;" > |
21 |
<input type= "button" id= "btnCloseDiv" name= "divCloseDiv" value= "關閉" onclick= "$('#divShow').hide();" /> |
23 |
<table id= "tbl" style= "width: 300px; height: 300px; border:#0000FF 1px solid; " > |
24 |
<tr><th>thhhhhhhhhhhhhhh</th></tr> |
25 |
<tr><td>tddddddddddddddd</td></tr> |
重點其實有三點:
1. 因為動態顯示、隱藏的 Div (divShow)裡面還有其他標籤,所以我們利用:
1 |
$(evt.target).parents( "#divShow" ).length==0 |
找到滑鼠點擊到的目標物件,其上層是否包含 divShow,若有,表示我們點擊的是 Div 中的項目,所以保留顯示 Div。
2. 若點擊的是 Div 本身,那也要保留顯示,所以在隱藏動作之前的判斷要排除自己:
1 |
evt.target.id != "divShow" |
3. 若點擊的是用來顯示 Div 的超連結,當然也不要把 Div 給隱藏起來:
為了方便識別,固定加框線和顏色,顯示 Div 的畫面如下: