jquery實現的點擊頁面其他地方隱藏顯示的元素:在實際應用中，可能有這樣的效果，那就是有這樣一個彈出層，點擊層本身的時候，這個層不會隱藏，而點擊除去層之外的頁面其他地方則會將這個層隱藏，下麵就通過代碼實例介紹一下如何實現此效果。代碼如下: <!DOCTYPE html> <html> <head>
jquery實現的點擊頁面其他地方隱藏顯示的元素:
在實際應用中，可能有這樣的效果，那就是有這樣一個彈出層，點擊層本身的時候，這個層不會隱藏，而點擊除去層之外的頁面其他地方則會將這個層隱藏，下麵就通過代碼實例介紹一下如何實現此效果。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body{background-color:#999999;} #thediv{ background-color:#FFFFFF; width:250px; height:250px; display:none; } </style> <script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ var odiv=$("#thediv"); $("#bt").click(function(event){ showDiv(); $(document).one("click",function(){ odiv.hide(); }); event.stopPropagation(); }); odiv.click(function(event){ event.stopPropagation(); }) function showDiv(){ odiv.fadeIn(); } }) </script> </head> <body> <input id="bt" type="button" value="顯示元素" /> <div id="thediv">螞蟻部落</div> </body> </html>
上面的代碼實現了我們的要求，下麵介紹一下它的實現過程。
一.代碼註釋:
1.$(function(){})，當文檔結構完全載入完畢再去執行函數中的代碼。
2.var odiv=$("#thediv")，獲取div元素對象。
3.$("#bt").click(function(event){})，為按鈕註冊click事件處理函數，事件處理函數的參數是事件對象。
4.showDiv()，調用此函數可以顯示div元素。
5.$(document).one("click",function(){odiv.hide();})，為document註冊click事件處理函數，事件處理函數可以將指定的div元素隱藏。
6.event.stopPropagation()，用來阻止事件冒泡，否則點擊事件冒泡到文檔，那麼div元素顯示後又會瞬間被隱藏。
7.odiv.click(function(event){event.stopPropagation();})，為div元素註冊click事件處理函數，這裡目的其實就是為了組織事件冒泡。
8.function showDiv(){odiv.fadeIn();}，調用此函數可以隱藏div。
二.相關閱讀:
1.click事件可以參閱jQuery的click事件一章節。
2.one()可以參閱jQuery的one()方法一章節。
3.stopPropagation()函數可以參閱jQuery的event.stopPropagation()方法一章節。
4.fadeIn()函數可以參閱jQuery的fadeIn()方法一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14662
更多內容可以參閱:http://www.softwhy.com/jquery/
