Jquery点击任意地方隐藏div

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/fontawesome/4.4.0/css/font-awesome.min.css">
<style>
	.lia-content{
		 500px;
		height: 500px;
	}
	.lia-component-custom-share .share-title{
		color: #0057c0;
		font-size: 14px;
		font-weight: bold;
		cursor: pointer;
		display: block;
	}
	.lia-component-custom-share .social-icons{
		display: none;
		background-color: #fff;
		border-radius: 2px;
		position: absolute;
		left: 10px;
		padding: 5px 0;
		margin: 2px 0 0;
		border: 1px solid #d1d1d1;
		border-radius: 4px;
		-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
		background-clip: padding-box;
	}
	.lia-component-custom-share .social-icons li{
		display: block;
	}
	.lia-component-custom-share .social-icons li a{
		display: block;
		padding: 3px 20px;
		color: #000;
		text-decoration: none;
	}

	.lia-component-custom-share .social-icons li a:hover{
		background-color: #e9faff;
	}
	
	.lia-component-custom-share.active .social-icons{
		display: block;
	}
	.lia-component-custom-share .share-title:after{
		display: inline-block;
		font: normal normal normal 14px/1 FontAwesome;
		content: "f107";
		color: #0057c0;
		margin-left: 4px;
	}
</style>
<body id="lia-body">
	<div class="lia-content">

		<div class="lia-component-custom-share">
			<span class="share-title">Share</span>
			<ul class="social-icons">		
				<li class="twitter"><a target="_blank" href=""><i class="icon icon-twitter"></i> Twitter</a></li>
				<li class="facebook"><a target="_blank" href=""><i class="icon icon-facebook"></i> FaceBook</a></li>
				<li class="linkedin"><a target="_blank" href=""><i class="icon icon-linkedin"></i> Linkedin</a></li>
			</ul>
		</div>

	</div>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
		$(function(){
			//不是最佳方法 2016年8月13日
			//最佳方案应该使用$.contains这个
			var $shareWrapper = $('#lia-body .lia-content .lia-component-custom-share');
			$shareWrapper.find('.share-title').on('click',function(e){
				//你要是冒泡了我还玩什么
				e.stopPropagation();
				$shareWrapper.toggleClass('active');
			});

			$('body').on('click',function(){
				$shareWrapper.removeClass('active');
			});
		})
	</script>
</body>
</html>

谨以此记录学习过程中遇到的问题、也许就有人看了呢,嘿嘿。

原文地址:https://www.cnblogs.com/zijian6/p/5766995.html