扯一下闲话
菜鸟想要实现一个效果,就要受尽很多折磨。今天花了几个小时都没实现,回家后又花了半小时,终于实现了。
想要的效果
- 点击一个按钮,弹出一个侧边菜单,同时显示一个遮罩层
- 再次点击按钮,侧边栏和遮罩层隐藏
- 弹出层的子元素不受影响
实现过程
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();
}
})
实现原理
- 使用
event.stopPropagation();
取消事件冒泡; - 通过
!_m.is(event.target) && _m.has(event.target).length == 0
判断,点击非本区域或遮罩层时隐藏侧边栏
评语 (0)