需求:不用select的默认样式,自己用div模拟出来
布局:
<div id="js_version" style="width:140px" class="dropdown_menu fr">
<p class="btn dropdown_switch jsDropdownBt">
<label class="jsBtLabel">2017.11.03.18</label>
<i class="arrow"></i>
</p>
<div class="dropdown_data_container jsDropdownList" style="display: none;">
<ul class="dropdown_data_list">
<li class="dropdown_data_item ">
2017.11.03.19
</li>
<li class="dropdown_data_item ">
2017.11.03.18
</li>
</ul>
</div>
</div>
样式:
*{padding: 0;margin:0;}
#js_version{margin: 20px;}
.dropdown_menu {
display: inline-block;
position: relative;
width: 95px;
line-height: normal;
text-align: left;
}
.btn.dropdown_switch {
border:1px solid #d8d8d8;
background-color: #fff;
border-radius: 3px;
color: #222;
height: 21px;
line-height: 21px;
width: auto;
padding-left: 0;
padding-right: 0;
text-align: left;
display: block;text-decoration: none;
}
.btn.dropdown_switch {
width: 100%;
}
.dropdown_switch label {
display: block;
cursor: pointer;
width: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
word-break: normal;
margin-left: 10px;
margin-right: 25px;
}
.dropdown_switch .arrow {
position: absolute;
right: 10px;
top: 50%;
margin-top: -2.5px;
display: inline-block;
width: 0;
height: 0;
border-width: 5px;
border-style: dashed;
border-color: transparent;
border-bottom-width: 0;
border-top-color: #c6c6c6;
border-top-style: solid;
}
.dropdown_data_container {
display: none;
position: absolute;
top: 100%;
margin-top: -1px;
left: 0;
z-index: 1;
min-width: 100%;
text-indent: 10px;
}
.dropdown_data_list {
max-height: 150px;
min-height: 2em;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #d9dadc;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
background-color: #fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font-size: 14px;
}
.dropdown_data_item {
line-height: 30px;
}
.dropdown_data_item a {
display: block;
text-decoration: none;
color: #222;
white-space: nowrap;
padding: 0 28px 0 10px;
}
用js模拟点击出现下拉框:
$('.arrow').click(function(event) {
$('.dropdown_data_container').show()
});
$('.dropdown_data_list .dropdown_data_item').click(function(event) {
var this_html=$(this).html()
alert(this_html)
$('.jsBtLabel').html(this_html)
/* Act on the event */
});