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

 

转载于:https://www.cnblogs.com/luna666/p/9661873.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值