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

js點擊任意區(qū)域彈出層消失實現(xiàn)代碼

 更新時間：2016年12月27日 14:22:03   作者：表白了  
這篇文章主要為大家詳細(xì)介紹了js點擊任意區(qū)域彈出層消失實現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js點擊任意區(qū)域彈出層消失的具體代碼，供大家參考，具體內(nèi)容如下

采用jquery element.parents();判斷點擊區(qū)域是否在彈出層上面或者在按鈕上面，否則讓彈出層消失。

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>

<pre>
 parent > child
 在給定的父元素下匹配所有的子元素
</pre>

<div class="help">
 <span class="bnt">我是彈出層</span>
 <ul id="list" class="foo">
 <li><a href="#">第1條記錄</a></li>
 <li><a href="#">第2條記錄</a></li>
 <li><a href="#">第3條記錄</a></li>
 <li><a href="#">第4條記錄</a></li>
 </ul>
</div>

<style>
 .bnt{
 width: 100px;height: 50px;background: #777;color: #fff;
 display: block;
 text-align: center;
 line-height: 50px;
 cursor: default;
 }
 .help ul{
 display: none;
 border: 1px solid #aaa;
 }
 a{display: block;padding: 10px;}
</style>

<script src="../jquery.js"></script>
<script>

 (function ($) {
 $('.bnt').click(function(){
  if($(this).hasClass('show')){
  $('.help ul').hide();
  $(this).removeClass('show')
  return ;
  }

  $('.help ul').show();
  $(this).addClass('show')

 })

 document.addEventListener('click',function (e) {
  var parent=$(e.target).parents('.foo,.help');

  if(parent.length===0){
  console.log('不在彈層與按鈕區(qū)')
  //操作此區(qū)域

  $('.help ul').hide();
  $('.bnt').removeClass('show');

  }else{
  console.log('按鈕與彈層區(qū)')
  }
 })
 })(jQuery);
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 幫助避免錯誤的Javascript陷阱清單

    幫助避免錯誤的Javascript陷阱清單

    幫助避免錯誤的Javascript陷阱清單(Javascript Gotchas listed to help avoid mistakes)
    2009-05-05
  • 詳解如何用babel轉(zhuǎn)換es6的class語法

    詳解如何用babel轉(zhuǎn)換es6的class語法

    這篇文章主要介紹了詳解如何用babel轉(zhuǎn)換es6的class語法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • Uniapp自定義導(dǎo)航欄并自適應(yīng)機(jī)型的實現(xiàn)方法

    Uniapp自定義導(dǎo)航欄并自適應(yīng)機(jī)型的實現(xiàn)方法

    Uniapp 是一款跨平臺開發(fā)框架,可以同時開發(fā)出可以在多個平臺上運(yùn)行的應(yīng)用,在開發(fā)過程中,我們常常需要自定義導(dǎo)航欄來滿足 UI 設(shè)計的需求,本文將介紹如何在 Uniapp 中自定義導(dǎo)航欄并自適應(yīng)不同機(jī)型的屏幕大小,需要的朋友可以參考下
    2023-09-09
  • JavaScript訪問字符串中單個字符的兩種方法

    JavaScript訪問字符串中單個字符的兩種方法

    這篇文章主要介紹了JavaScript訪問字符串中單個字符的兩種方法,本文分別講解了索引方式訪問單個字符串、charAt()函數(shù)訪問單個字符以及兩種方式的不同,需要的朋友可以參考下
    2015-07-07
  • 基于javascript實現(xiàn)移動端輪播圖效果

    基于javascript實現(xiàn)移動端輪播圖效果

    這篇文章主要為大家詳細(xì)介紹了基于javascript實現(xiàn)移動端輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-12-12
  • JavaScript中的動態(tài)?import()用法示例解析

    JavaScript中的動態(tài)?import()用法示例解析

    這篇文章主要為大家介紹了JavaScript中的動態(tài)import()用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-04-04
  • JavaScript提高性能知識點匯總

    JavaScript提高性能知識點匯總

    這篇文章主要為大家介紹了JavaScript幾個提高性能知識點，感興趣的小伙伴們可以參考一下
    2016-01-01
  • 手把手教你在微信小程序中使用three.js(保姆級教程)

    手把手教你在微信小程序中使用three.js(保姆級教程)

    Three.js是一款運(yùn)行在瀏覽器中的3D引擎,你可以用它創(chuàng)建各種三維場景,包括了攝影機(jī)、光影、材質(zhì)等各種對象,下面這篇文章主要給大家介紹了關(guān)于如何在微信小程序中使用three.js的保姆級教程,需要的朋友可以參考下
    2023-03-03
  • 微信小程序?qū)崿F(xiàn)點擊導(dǎo)航標(biāo)簽滾動定位到對應(yīng)位置

    微信小程序?qū)崿F(xiàn)點擊導(dǎo)航標(biāo)簽滾動定位到對應(yīng)位置

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點擊導(dǎo)航標(biāo)簽滾動定位到對應(yīng)位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-11-11
  • uniapp中使用videojs構(gòu)建H5直播播放器

    uniapp中使用videojs構(gòu)建H5直播播放器

    這篇文章主要為大家介紹了uniapp中使用videojs構(gòu)建H5直播播放器實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-06-06

最新評論