素材牛VIP会员

div+jquery仿select下拉框效果

 所属分类:网页特效-输入/选择框/联动

 浏览:2098次  评论:0次  更新时间:2016-10-06
牛币素材VIP可免积分下载
div+jquery仿select下拉框效果兼容IE8
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:用div布局+jquery插件仿select下拉框效果

详细介绍

使用方法:

引入jQuery库文件

<script src="jquery-1.8.3.min.js"></script>

插件初始化、参数配置

$(function(){
    $(".checkspan").bind("click",function(){
        var ul = $(this).siblings('ul')
        if(ul.is(":hidden")){
            ul.slideDown('400', function() {
                $(this).find("li").bind("click",function(){
                    var selectLi=$(this).text();
                    $("#select span").text(selectLi);
                    $("#select ul").slideUp(400);
                })
                    ul.mouseleave(function() {
                        $('#select ul').slideUp(400)
                    });
            });
        }else{
            $(this).siblings('ul').slideUp(400)
        }
        
    })
    
})

引入CSS样式

#select{width: 200px; line-height: 25px; border-radius: 5px; border:1px solid #ccc; font-size: 12px; padding:0 10px; position: relative;}
#select i{width: 0; height: 0; border-top: 5px solid #333; border-left: 5px solid transparent;  border-right: 5px solid transparent;
position: absolute; top: 10px; right: 10px;}
#select span{display: block; height: 25px; cursor: pointer;}
#select ul,#select li{padding: 0; margin:0 }
#select li{line-height: 30px; color: #666; list-style-type: none; border-bottom: 1px dashed #eee; cursor: pointer;transition: all 1s ease 0s;}
#select li:hover{ border-bottom: 1px solid #51A6FF; background-color: #DAF0FF; padding-left: 20px; font-weight: bold; }
#select li:last-child{border-bottom: 0}
#select ul{display: none;}
.flipx { transform: rotateY(180deg); }

HTML结构部分

<div id="select">
    <i></i>
    <span class="checkspan">点击下拉框选择</span>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王麻子</li>
        <li>赵六</li>
        <li>吴磊</li>
        <li>胡歌</li>
        <li>以上排序并不代表本人立场</li>
    </ul>
</div>

相关素材 - 输入/选择框/联动

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)