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()赋予；