html代码如下:
<divid="type"class="test">
<span>投资种类</span>
<ulclass="dropdown">
<li>期货</li>
<li>股票</li>
<li>期权</li>
</ul>
</div>
<divid="kind"class="test">
<span>投资类型</span>
<ulclass="dropdown">
<li>趋势</li>
<li>震荡</li>
<li>套利</li>
<li>选股</li>
<li>择时</li>
</ul>
</div>
css代码如下:
ulli{
list-style:none;
}
.test{
position:relative;
float:left;
width:120px;
height:40px;
padding-left:11px;
font-size:15px;
line-height:40px;
cursor:pointer;
border:1pxsolid#d2d2d2;
border-radius:3px;
margin-right:20px;
outline:none;
}
.test:before{
position:absolute;
right:13px;
top:18px;
width:0;
height:0;
content:"";
border-width:8px8px08px;
border-style:solid;
border-color:#d36969transparent;
-webkit-transition:transform.25s;
-moz-transition:transform.25s;
-ms-transition:transform.25s;
-o-transition:transform.25s;
transition:transform.25s;
}
.test:after{
position:absolute;
right:15px;
top:18px;
width:0;
height:0;
content:"";
border-width:6px6px06px;
border-style:solid;
border-color:#ffftransparent;
-webkit-transition:all.25s;
-moz-transition:all.25s;
-ms-transition:all.25s;
-o-transition:all.25s;
transition:all.25s;
}
.test.active:before{
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
.test.active:after{
top:20px;
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
.test.dropdown{
position:absolute;
right:0;
left:0;
display:none;
padding:0;
border-radius:inherit;
border:1pxsolid#d2d2d2;
box-shadow:2px2px5pxrgba(0,0,0,.4);
}
.test.active.dropdown{
display:block;
}
.test.dropdown:before{
position:absolute;
right:13px;
bottom:100%;
width:0;
height:0;
content:"";
border-width:08px8px8px;
border-style:solid;
border-color:#d2d2d2transparent;
}
.test.dropdown:after{
position:absolute;
right:15px;
bottom:100%;
width:0;
height:0;
content:"";
border-width:06px6px6px;
border-style:solid;
border-color:#ffftransparent;
}
.test.dropdownli{
float:left;
width:129px;
font-size:14px;
-webkit-transition:all.3sease-out;
-moz-transition:all.3sease-out;
-ms-transition:all.3sease-out;
-o-transition:all.3sease-out;
transition:all.3sease-out;
text-align:center;
}
.test.dropdownli:first-of-type{
border-radius:3px3px00;
}
.test.dropdownli:last-of-type{
border-radius:003px3px;
}
.test.dropdownli:hover{
color:#fff;
background:#c43c3d;
}
对于:before和:after两个伪元素不理解可以去看看我上篇博客点击这里
js代码如下:
functionDropDown(el){
this.dd=el;
this.span=this.dd.children('span');
this.li=this.dd.find('ul.dropdownli');
this.val='';
}
DropDown.prototype.initEvents=function(){
varobj=this;
obj.dd.on('click',function(event){
$(this).toggleClass('active').siblings().removeClass('active');
event.stopPropagation();
});
obj.li.on('click',function(){
varopt=$(this);
obj.val=opt.html();
if(obj.span.html()==obj.val)return;
obj.span.html(obj.val);
$(document).click(function(){
$('.test').removeClass('active');
});
})
}
vartest1=newDropDown($('#type'));
vartest2=newDropDown($('#kind'));
test1.initEvents();
test2.initEvents()
|