欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery點(diǎn)擊自身以外地方關(guān)閉彈出層的簡(jiǎn)單實(shí)例

 更新時(shí)間：2013年12月24日 09:29:03   作者：  
本篇文章主要是對(duì)jQuery點(diǎn)擊自身以外地方關(guān)閉彈出層的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

主要功能是點(diǎn)擊顯示,然后通過(guò)點(diǎn)擊頁(yè)面的任意位置都能關(guān)閉顯示效果,主要是$(document).click的作用

開發(fā)過(guò)程中經(jīng)常有一些彈出層,彈出后要在點(diǎn)擊頁(yè)面其他地方時(shí)自動(dòng)關(guān)閉,下面是實(shí)現(xiàn)代碼:

HTML代碼：

復(fù)制代碼 代碼如下:

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

CSS代碼：
.hide{display:none;}

JS代碼

復(fù)制代碼 代碼如下:

$(document).ready(function(){
$("div.down").click(function(e){
e.stopPropagation();
$("div.con").removeClass("hide");
});
$(document).click(function(){
if(!$("div.con").hasClass("hide")){
$("div.con").addClass("hide");
}
});
});

OK，自己本地測(cè)試下吧，css樣式自己修改！

相關(guān)文章

  • jQuery?基礎(chǔ)選擇器與屬性選擇器

    jQuery?基礎(chǔ)選擇器與屬性選擇器

    這篇文章主要介紹了jQuery?基礎(chǔ)選擇器與屬性選擇器，選擇所有元素,此選擇器使用要慎重，其速度是極其慢的，詳細(xì)介紹內(nèi)容需要的小伙伴可以參考一下下面文章內(nèi)容
    2022-08-08
  • jQuery查找節(jié)點(diǎn)并獲取節(jié)點(diǎn)屬性的方法

    jQuery查找節(jié)點(diǎn)并獲取節(jié)點(diǎn)屬性的方法

    這篇文章主要介紹了jQuery查找節(jié)點(diǎn)并獲取節(jié)點(diǎn)屬性的方法,涉及jQuery簡(jiǎn)單獲取節(jié)點(diǎn)及attr與text方法讀取元素屬性的相關(guān)技巧,需要的朋友可以參考下
    2016-09-09
  • Jquery倒計(jì)時(shí)源碼分享

    Jquery倒計(jì)時(shí)源碼分享

    這是一個(gè)基于jquey寫的倒計(jì)時(shí)。當(dāng)然代碼有點(diǎn)小改動(dòng)，只是改了一下展示效果。
    2014-05-05
  • jQuery中inArray方法注意事項(xiàng)分析

    jQuery中inArray方法注意事項(xiàng)分析

    這篇文章主要介紹了jQuery中inArray方法注意事項(xiàng),結(jié)合實(shí)例形式分析了jQuery中inArray方法變量判斷的相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2016-01-01
  • 完美兼容各大瀏覽器的jQuery插件實(shí)現(xiàn)圖片切換特效

    完美兼容各大瀏覽器的jQuery插件實(shí)現(xiàn)圖片切換特效

    網(wǎng)友zoeDylan寫的原創(chuàng)jquery插件，實(shí)現(xiàn)了圖片輪播功能，jquery插件名稱為zoeDylan.ImgChange，圖片路徑、跳轉(zhuǎn)鏈接、提示標(biāo)題都是有動(dòng)態(tài)數(shù)組來(lái)配置，jquery插件可靈活配置6個(gè)參數(shù)， height高、width寬、mgs圖片地址、links點(diǎn)擊地址、tips圖片說(shuō)明、timers自動(dòng)切換時(shí)間，
    2014-12-12
  • jQuery通過(guò)寫入cookie實(shí)現(xiàn)更換網(wǎng)頁(yè)背景的方法

    jQuery通過(guò)寫入cookie實(shí)現(xiàn)更換網(wǎng)頁(yè)背景的方法

    這篇文章主要介紹了jQuery通過(guò)寫入cookie實(shí)現(xiàn)更換網(wǎng)頁(yè)背景的方法,涉及jQuery結(jié)合cookie設(shè)置頁(yè)面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下
    2016-04-04
  • JQuery select標(biāo)簽操作代碼段

    JQuery select標(biāo)簽操作代碼段

    我們經(jīng)常遇到要操作DOM元素，例如<select>，在Asp.net中Dropdownlist原型就是select。
    2010-05-05
  • 基于jQuery插件jqzoom實(shí)現(xiàn)的圖片放大鏡效果示例

    基于jQuery插件jqzoom實(shí)現(xiàn)的圖片放大鏡效果示例

    這篇文章主要介紹了基于jQuery插件jqzoom實(shí)現(xiàn)的圖片放大鏡效果,結(jié)合實(shí)例形式分析了jQuery插件jqzoom的使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2017-01-01
  • 13個(gè)絢麗的Jquery 界面設(shè)計(jì)網(wǎng)站推薦

    13個(gè)絢麗的Jquery 界面設(shè)計(jì)網(wǎng)站推薦

    今天共享一些令人振奮的UI教程，這些UI大部分是基于Jquery的插件，主要包括動(dòng)態(tài)切換視圖的相冊(cè)、3D旋轉(zhuǎn)分享按鈕、Facebook admin Panel，下滑效果的導(dǎo)航Menu，滑翔購(gòu)物車功能，漂亮的Form表單元素等等。
    2010-09-09
  • 用jquery ajax獲取網(wǎng)站Alexa排名的代碼

    用jquery ajax獲取網(wǎng)站Alexa排名的代碼

    其實(shí)就是利用了jquery的ajax功能，獲取遠(yuǎn)程的xml文件，讀取指定內(nèi)容的代碼，對(duì)于學(xué)習(xí)jquery的朋友是個(gè)不錯(cuò)的參考。
    2009-12-12

最新評(píng)論