jQuery動態顯示Div，按Div以外的地方就隱藏Div

http://www.dotblogs.com.tw/smartleos/archive/2012/12/06/85460.aspx
按這裡就顯示Div

this is a div.

thhhhhhhhhhhhhhh
tddddddddddddddd

 

 

<html>
02     <head>
03         <title></title>
04         <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
05     </head>
06     <script type="text/javascript">
07         $(function(){
08             $("#divShow").hide();
09              
10             $('body').click(function(evt) {
11                 if($(evt.target).parents("#divShow").length==0 &&
12                     evt.target.id != "aaa" && evt.target.id != "divShow") {
13                     $('#divShow').hide();
14                 }
15             });
16         });
17     </script>
18     <body>
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();" />
22         <p>this is a div.</p>
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>
26         </table>
27         </div>
28     </body>
29 </html>

重點其實有三點：

1. 因為動態顯示、隱藏的 Div （divShow）裡面還有其他標籤，所以我們利用：

1 $(evt.target).parents("#divShow").length==0

找到滑鼠點擊到的目標物件，其上層是否包含 divShow，若有，表示我們點擊的是 Div 中的項目，所以保留顯示 Div。

2. 若點擊的是 Div 本身，那也要保留顯示，所以在隱藏動作之前的判斷要排除自己：

1 evt.target.id != "divShow"

3. 若點擊的是用來顯示 Div 的超連結，當然也不要把 Div 給隱藏起來：

1 evt.target.id != "aaa"

為了方便識別，固定加框線和顏色，顯示 Div 的畫面如下：

 

posted @ 2013-04-10 15:07  haiwei.sun  阅读(342)  评论(5)    收藏  举报
返回顶部