标签搜索

jQuery 弹出层点击非本区域或遮罩层隐藏

小王先森
2021-04-01 / 0 评论 / 45 阅读 / 正在检测是否收录...
/

扯一下闲话

菜鸟想要实现一个效果,就要受尽很多折磨。今天花了几个小时都没实现,回家后又花了半小时,终于实现了。

想要的效果

  • 点击一个按钮,弹出一个侧边菜单,同时显示一个遮罩层
  • 再次点击按钮,侧边栏和遮罩层隐藏
  • 弹出层的子元素不受影响

实现过程

css代码

.proup {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 7777;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

html代码

<div class="btn"></div>
<div class="proup"></div>
<div class="menu">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

jQuery 代码

$('.btn').click(function(event) {
  event.stopPropagation();
  $('.menu').toggle();
  $('.proup').toggle();
})
$(document).click(function(event){
  var _m = $('.menu');
  if(!_m.is(event.target) && _m.has(event.target).length == 0){
    $('.menu').hide();
    $('.proup').hide();
  }
})

实现原理

  1. 使用 event.stopPropagation(); 取消事件冒泡;
  2. 通过 !_m.is(event.target) && _m.has(event.target).length == 0 判断,点击非本区域或遮罩层时隐藏侧边栏
1

评论 (0)

取消