A-A+

closest() 方法应用

2016年02月26日 jquery 暂无评论 阅读 86 次
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>

closest() 方法

</title>
   <style type="text/css">
      *{
         margin: 0;padding: 0;
      }
      header{
         position: absolute;
         top: 0;left: 0;
         width: 100%;
         padding: 1em 0;
         background: lightblue;
         text-align: center;
      }
      #shadow{
         position: fixed;
         width: 100%;height: 100%;
         top: 0;left: 0;
         background: rgba(0,0,0,.7);
         opacity: 0;
         pointer-events: none;
      }
      #myNav{
         position: fixed;
         top: 0;left: -40%;
         width: 40%;height: 100%;
         background: gold;
      }

      #shadow,
      #shadow nav{
         -webkit-transition: all .3s ease;
         transition: all .3s ease;
      }
      
      .showShadow #shadow{
         opacity: 1;
         pointer-events: auto;
      }
      .showShadow #myNav{
         -webkit-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);
      }
      
   </style>
   <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
   <header>
      <input id="myInput" type="button" value="分类">
   </header>
   <div id="shadow">
      <nav id="myNav"></nav>
   </div>
   <script>
      $(function(){
         $('#myInput,#shadow').on('click', function(e){
//          target 属性规定哪个 DOM 元素触发了该事件。
            if($(e.target).closest('#myNav').length > 0){
//             closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上
               e.stopPropagation();
//             不再派发事件。
//             终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。
               return;
            }
            $('body').toggleClass('showShadow');
         })
      })
   </script>
</body>
</html>
标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录