Drop-Down自定义下拉插件

收藏

本文演示了Drop-Down下拉框select五种酷炫效果，类似下拉效果：http://www.erdangjiade.com/js/252.html' target='_blank'>Combo Select演示5种可搜索的jQuery下拉框效果

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

演示一：默认效果

下拉框HTML代码

<div id="dd" class="wrapper-dropdown-1" tabindex="1">
    <span>素材火</span>
    <ul class="dropdown" tabindex="1">
        <li><a href="http://www.erdangjiade.com/js">jQuery特效</a></li>
        <li><a href="http://www.erdangjiade.com/templates">网站模板</a></li>
    </ul>
</div>

下拉框样式

.wrapper-dropdown-1:focus .dropdown {
    opacity: 1;
    pointer-events: auto;
}

.wrapper-dropdown-1:focus:after {
    border-color: #9bc7de transparent;
    border-width: 6px 6px 0 6px ;
    margin-top: -3px;
}

DropDown.prototype = {
    initEvents: function() {
        var obj = this;

        obj.dd.on('click', function(event) {
            $(this).toggleClass('active');
            return false;
        });

        obj.opts.on('click', function() {
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text('Gender: ' + obj.val);
        });
    },
    getValue: function() {
        return this.val;
    },
    getIndex: function() {
        return this.index;
    }
}

var dd = new DropDown($('#dd'));

$(document).click(function() { //再次click事件隐藏下拉列表
    $('.wrapper-dropdown-1').removeClass('active');
});

演示二：Drop-Down附带图标

function DropDown(el) {
    this.dd = el;
    this.initEvents();
}
DropDown.prototype = {
    initEvents: function() {
        var obj = this;

        obj.dd.on('click', function(event) {
            $(this).toggleClass('active');
            event.stopPropagation();
        });
    }
}

$(function() {

    var dd = new DropDown($('#dd'));

    $(document).click(function() {
        // all dropdowns
        $('.wrapper-dropdown-2').removeClass('active');
    });

});

.wrapper-dropdown-2:focus .dropdown {
    opacity: 1;
    pointer-events: auto;
}

.wrapper-dropdown-2:focus:after {
    border-width: 0 6px 6px 6px;
}

演示三：淡入淡出

.wrapper-dropdown-3:focus .dropdown {
    opacity: 1;
    pointer-events: auto;
}

演示四：淡入淡出

.wrapper-dropdown-4:focus .dropdown {
    opacity: 1;
    pointer-events: auto;
}
.wrapper-dropdown-4:focus:after {
    border-width: 0 6px 6px 6px;
}

演示五：滑动+附带图标

.wrapper-dropdown-5:focus {
    border-radius: 5px 5px 0 0;
    background: #4cbeff;
    box-shadow: none;
    border-bottom: none;
    color: white;
}

.wrapper-dropdown-5:focus:after {
    border-color: #82d1ff transparent;
}

.wrapper-dropdown-5:focus .dropdown {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    max-height: 400px;
}