jQuery Drop-Down 自定义下拉框

在线实例

实例演示

使用方法

 <section class="main">
        <div class="wrapper-demo">
            <div id="dd" class="wrapper-dropdown-1" tabindex="1">
                <span>手册网</span>
                <ul class="dropdown" tabindex="1">
                    <li><a href="#">jQuery特效</a></li>
                    <li><a href="#">网站模板</a></li>
                </ul>
            </div>
            </div>
    </section>
</div>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    function DropDown(el) {
        this.dd = el;
        this.placeholder = this.dd.children('span');
        this.opts = this.dd.find('ul.dropdown > li');
        this.val = '';
        this.index = -1;
        this.initEvents();
    }
    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;
        }
    }
    $(function() {
        var dd = new DropDown($('#dd'));
        $(document).click(function() {
            $('.wrapper-dropdown-1').removeClass('active');
        });
    });
</script>

云盘内容

注意：示例只是当前的内容，【下载】的是全部jQuery插件一起打包后的文件。