点击自以外任意处，关闭自身

Html:

1 <div class="down">click</div>
2 <div class="con hide">show-area</div>

CSS:

.hide{display:none;}

js:

 1 $(document).ready(function(){
 2     $("div.down").click(function(e){
 3         e.stopPropagation();
 4         $("div.con").removeClass("hide");
 5     });
 6     $(document).click(function(){
 7         if(!$("div.con").hasClass("hide")){
 8             $("div.con").addClass("hide");
 9         }
10     });
11 });

other方法：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meat charset="UTF-8">
 5     <title>test</title>
 6     <script type="text/javascript" src="jquery-1.7.js"></script>
 7 </head>
 8 <body>
 9     <a href="#">click</a>
10     <div class="show" style="display:none; width:100px; height:50px; background:#000; color:#fff;">here</div>
11 <script type="text/javascript">
12 $(document).ready(function(){
13     function LayerHider(){
14         this.hideObjectArr = [];
15     }
16     LayerHider.prototype = {
17         addHideItem : function(_bindedDom,_callback){
18             var bindedDom = _bindedDom;
19             var callback = _callback;
20             var newHideItem = {hideObject:bindedDom,hideObjectCallBack:callback};
21             this.hideObjectArr.push(newHideItem);
22         },
23         hide : function(){
24             for(var i = this.hideObjectArr.length - 1; i>=0; i--){
25                 var hideItemObject = this.hideObjectArr[i];
26                 $(hideItemObject.hideObject).hide();
27                 if(hideItemObject.hideObjectCallBack){
28                     hideItemObject.hideObjectCallBack();
29                 }
30             }
31         }
32     }
33     if(typeof DKLayerHider == 'undefined'){
34         var DKLayerHider = new LayerHider();
35         $(document).click(function(){
36             DKLayerHider.hide();
37         });
38     } 
39 
40     $('a').click(function(e){
41         e.stopPropagation();
42         $('.show').show();
43     });
44     $('.show').click(function(e){
45         e.stopPropagation();
46     });
47     DKLayerHider.addHideItem('.show',function(){});
48 });
49 </script>
50 </body>
51 </html>

 

 

posted @ 2012-02-10 16:53  妙計出自山人  阅读(691)  评论(2)  编辑  收藏  举报