关于jquery模仿select下拉选项

本文介绍了一个简单的地区选择器组件的实现方法,通过HTML、CSS和jQuery结合使用来创建一个交互式的下拉菜单,用于选择不同的地区选项如北京、上海等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

html代码:<div class="sleAreaDiv">
                            <span>选择地区</span>
                            <div class="sleAreaHidden">

                                   <div class="sleAreaLi">北京</div>

                                   <div class="sleAreaLi">上海</div>

                                   <div class="sleAreaLi">深圳</div>

                            </div>

                        </div>


css代码:

    .sleAreaDiv{width:109px;border:1px solid #ccc;height:30px;line-height:30px;text-align:left;text-indent:1em;background: #fff url(../images/logo.png) no-repeat -648px -132px;position:relative;cursor:pointer;}

   .sleAreaHidden{width:100%;border:1px solid #ccc;position:absolute;left:-1px;visibility:hidden;background:#fff;}

    .sleAreaHidden .sleAreaLi{height:25px;}


jquery代码(要先引用jquery文件):

$(document).ready(function(){

         select('sleAreaDiv','sleAreaHidden','sleAreaLi','#bf3982','#666','white');

})

function select(selectDiv,selectHidden,selectLi,bgcolor,precolor,color){
    $('.'+selectDiv).click(function(){

        $('.'+selectDiv).children('.'+selectHidden).css('visibility','hidden');   
        $(this).children('.'+selectHidden).css('visibility','visible');    
    })
    $('.'+selectLi).mouseover(function(){
        $('.'+selectLi).css({'background':'none','color':precolor});
        $(this).css({'background':bgcolor,'cursor':'pointer','color':color});
    })
    $('.'+selectLi).click(function(event){
        event.stopPropagation();//防止触发事件冒泡到父元素
        $(this).parent().css('visibility','hidden');
        $(this).parent().parent().children('span').html($(this).html());
    })
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值