Drop-Down自定义下拉插件

演示一：<a href='http://www.sucaihuo.com/jquery/4/490/demo/' target='_blank'>默认效果</a>

下拉框HTML代码

<div id="dd" class="wrapper-dropdown-1" tabindex="1">
    <span>素材火</span>
    <ul class="dropdown" tabindex="1">
        <li><a href="http://www.sucaihuo.com/js">jQuery特效</a></li>
        <li><a href="http://www.sucaihuo.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');
});

演示二：<a href='http://www.sucaihuo.com/jquery/4/490/demo/index2.html' target='_blank'>Drop-Down附带图标</a>

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;
}

演示三：<a href='http://www.sucaihuo.com/jquery/4/490/demo/index3.html' target='_blank'>淡入淡出</a>

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

演示四：<a href='http://www.sucaihuo.com/jquery/4/490/demo/index4.html' target='_blank'>淡入淡出</a>

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

演示五：<a href='http://www.sucaihuo.com/jquery/4/490/demo/index5.html' target='_blank'>滑动+附带图标</a>

.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;
}