<!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{
width: 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>
谨以此记录学习过程中遇到的问题、也许就有人看了呢，嘿嘿。
时间： 2024-10-24 17:26:17