点击自以外任意处，关闭自身-优快云博客

本文介绍了一种使用JavaScript实现的点击事件处理方法，通过改变元素的显示状态来实现在点击不同区域时页面元素的可见性切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>