div模仿select下拉框

由於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()賦予；