js实现点击div以外区域,隐藏div区域

页面刚开始刷新时,是显示的;
点击左侧按钮、其他区域或右侧关闭按钮都可以使其隐藏,再点击左侧按钮显示;

注:先引入jQuery版本
JS

<script type="text/javascript">
	$(function() { 
		$('.showBtn').click(function(event) { 
			//取消事件冒泡 
			event.stopPropagation();
			//按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。 
			$('.showMain').toggleClass('hide');
			return false;
		});
		$('.closeBtn').click(function(event) { 
			//取消事件冒泡 
			event.stopPropagation();
			//按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。 
			$('.showMain').toggleClass('hide');
			return false;
		});
		//点击空白处隐藏弹出层,下面为滑动消失效果和淡出消失效果。
		$(document).click(function(event) { 
			var _con = $('.showMain'); // 设置目标区域
			if(!_con.is(event.target) && _con.has(event.target).length === 0) {  // Mark 1
				//$('#divTop').slideUp('slow'); //滑动消失
				//$('.showMain').hide(1000); //淡出消失
				$('.showMain').addClass('hide');
			}
		});
	})
</script>

CSS

.showBtn { 
	height: 220px;
    width: 60px;
    background-color: #f3f3f3;
    text-align: center;
    padding-top: 90px;
    box-sizing: border-box;
    position: fixed;
    left: 8px;
    bottom: 8px;
    z-index: 3;
}
.showBtn:hover { 
	cursor: pointer;
}
.showMain { 
	height: 200px;
	overflow: hidden;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1111111;
	transition: all 0.5s;
	animation: showMainMove 0.5s;
}
@keyframes showMainMove { 
	from { 
		left: -2000px;
	}
	to { 
		left: 0;
	}
}
.showMain.hide { 
	left: -2000px;
}
.showMain.show { 
	left: 0px;
}
.showMain img { 
	width: 100%;
	height: auto;
	opacity: 0.8;
}
.closeBtn{ 
	font-size: 30px;
	height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
	position: absolute;
    bottom: 140px;
    right: 50px;
    border: 1px solid #666;
    border-radius: 50%;
}
.closeBtn:hover{ 
	cursor: pointer;
}

HTML

<div class="wrap">
	<div class="showBtn">点击显示隐藏</div>
	<div class="showMain">
		<img src="qqq.jpg" alt="" />
		<div class="closeBtn">X</div>
	</div>
</div>

如有错误或不足,欢迎各位大佬评论指正。

    原文作者:茶憶
    原文地址: https://blog.csdn.net/weixin_44711440/article/details/105512632
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞