<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul id=ct>
<li class = list id='list1'>珠宝玉器<span>></span></li>
<li class = list id='list2'>珠宝玉器<span>></span</li>
<li class = list id='list3'>珠宝玉器<span>></span</li>
<li class = list id='list4'>珠宝玉器<span>></span</li>
<li class = list id='list5'>珠宝玉器<span>></span</li>
</ul>
</body>
</html>
*{padding :0;margin:0;font-family:微软雅黑,Arial; }
li{list-style: none}
#ct{
margin : 10px;
max-width : 15em;
background: #e12;
}
.list{
position:relative;
font-size:1.1em;
color:#fff;
margin:0 0.5em;
padding:0.5em 0.5em;
border-top:0.2px dotted rgba(200,200,200,0.5) ;
cursor : pointer;
vertical-align: middle;
}
.list:first-child{border:0}
.list>span{
position:relative;
left:6em;
font-size : 1.2em;
}
.list2{
position:absolute;
left:15em;
border:1px solid;
}
this.seats = seats
this.prepareHtml()
this.mount()
this.close()
}
items.prototype.prepareHtml = function(){
var {seat1,seat2,seat3,seat4}= this.seats
var div = this.div =document.createElement('div')
div.className = 'list2'
var html =`
<div>${seat1}</div><div>${seat2}</div>
<div>${seat3}</div><div>${seat4}</div>
`
div.innerHTML = html
}
items.prototype.mount = function(){
$('#ct').append(this.div)
}
items.prototype.close = function(){
var xxx = this.div
$('.list').mouseleave(function(){ xxx.remove()})
}
$('.list').mouseenter(function(){
var secondList = new items({
seat1 : '翡翠',
seat2 : '玉石',
seat3 : '宝石',
seat4 : '水晶',
seat5 : '玛瑙',
seat6 : '珍珠'
})
})
