亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

采用jquery element.parents();判斷點(diǎn)擊區(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>

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

相關(guān)文章

最新評(píng)論