<div id="container">
<li>Java<i class="fa fa-times pull-right"></i></li>
<li>Javascript<i class="fa fa-times pull-right"></i></li>
<li>HTML<i class="fa fa-times pull-right"></i></li>
<li>CSS<i class="fa fa-times pull-right"></i></li>
<li>PHP<i class="fa fa-times pull-right"></i></li>
</div>
/*CSS源代码*/
@import url('//cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css');
html, body {
width: 100%;
height: 100%;
}
body{
background:#666;
color: #fff;
font-family: 'microsoft yahei',Arial,sans-serif;
}
ul{
list-style:none;
margin: 0;
padding: 0;
position: relative;
}
li{
padding: 10px;
margin: 2px;
border: 1px solid #888;
}
.more {
display: none;
}
var moreTemplate = '<li class="more">添加更多<i class="fa fa-times pull-right"></i></li>';
var $container = $("#container");
$("body").click(function(e){
if($(e.target).hasClass("fa-times")) {
return false;
} else {
var $more = $(moreTemplate);
$container.prepend($more);
$more.slideDown();
}
});
$container.on("click", ".fa-times", function(){
var $row = $(this).parent();
$row.animate({"margin-left": "-100%", "margin-right": "100%"}, function(){
$(this).remove();
});
});