div模仿select下拉框
摘要：
由於css不能修改select option的樣式，使用起來不靈活，
所以寫一個用div效仿的select下拉框。
html
<div class="aside__status-text___3dXKm">
<span><di...
由於css不能修改select option的樣式，使用起來不靈活，
所以寫一個用div效仿的select下拉框。
html
<div class="aside__status-text___3dXKm"> <span><div class="status_circle status_circle_online"></div>線上</span> </div> <ul id=" " value="" class="selectBoxs"> <li value=""><div class="status_circle status_circle_online"></div>線上</li> <li value=""><div class="status_circle status_circle_hide"></div>隱身</li> </ul>
css
.selectBoxs{
background-color: rgb(255, 255, 255);
padding: 10px;
line-height: 20px;
position: absolute;
top: 119px;
z-index: 19920829;
border-radius: 3px;
text-overflow: ellipsis;
word-break: keep-all;
overflow: hidden;
white-space: nowrap;
border: 0;
width: 100%;
color: #989898;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
display: none;
}
.status_circle{
display: inline-block;
width: 8px;
height: 8px;
background-color: #30cc80;
border-radius: 50%;
margin-right: 7px;
}
.status_circle_hide{
background-color: orange;
}
js
<script src="../js/jquery-1.11.0.min.js"></script>
<script>
// 切換線上狀態
var selectBox = $('.selectBoxs');//下拉框
var selectlist = $('.selectBoxs li');
var stuate = $('.aside__status-text___3dXKm span');//點選狀態
stuate.click(function () {
selectBox.show();
})
selectlist.click(function () {
selectBox.hide();
$(this).parent().prev().find("span").html($(this).html());
})
</script>
先隱藏ul下拉框盒子，點選狀態時顯示下拉框，選中列表時把列表的內容傳入顯示的狀態上，
prev()是查詢相鄰兄弟的前一個，find()查詢到，html()賦予；