Web网页中的下拉框选择按钮插件

此插件实现点击下拉按钮，选择框进行选择的功能：

JS部分代码：

window.onload = function() {
    function DropDown(el) {
        this.dd = el;
        this.span = this.dd.children('span');
        this.li = this.dd.find('ul.dropdown li');
        this.val = '';
    }
    DropDown.prototype.initEvents = function() {
        var obj = this;
        obj.dd.on('click', function(event) {
            $(this).toggleClass('active').siblings().removeClass('active');
            event.stopPropagation();
        });
        obj.li.on('click', function() {
            var opt = $(this);
            obj.val = opt.html();
            if(obj.span.html() == obj.val) return;
            obj.span.html(obj.val);
            $(document).click(function() {
                $('.test').removeClass('active');
            });
        })
    }
    var test1 = new DropDown($('#type1'));
    var test2 = new DropDown($('#type2'));
    var test3 = new DropDown($('#type3'));
    var test4 = new DropDown($('#type4'));
    var test5 = new DropDown($('#type5'));
    var test6 = new DropDown($('#type6'));
    var test7 = new DropDown($('#type7'));
    var test8 = new DropDown($('#type8'));
    test1.initEvents();
    test2.initEvents();
    test3.initEvents();
    test4.initEvents();
    test5.initEvents();
    test6.initEvents();
    test7.initEvents();
    test8.initEvents();
//    如果需要可以添加更多的textN
}

CSS代码：

 ul li {
     list-style: none;
 }
 
 .test {
     position: relative;
     float: left;
     width: 100px;
     height: 40px;
     padding-left: 11px;
     font-size: 13px;
     line-height: 40px;
     cursor: pointer;
     border-radius: 3px;
     margin-right: 20px;
     outline: none;
     color: gray;
 }
 
 .test .dropdown li {
     float: left;
     width: 109px;
     font-size: 11px;
     -webkit-transition: all .3s ease-out;
     -moz-transition: all .3s ease-out;
     -ms-transition: all .3s ease-out;
     -o-transition: all .3s ease-out;
     transition: all .3s ease-out;
     text-align: center;
     background-color: white;
     color: gray;
 }
 
 .test:before {
     position: absolute;
     right: 13px;
     top: 18px;
     width: 0;
     height: 0;
     content: "";
     border-width: 8px 8px 0 8px;
     border-style: solid;
     border-color: rgb(255, 148, 48, 1) transparent;
     -webkit-transition: transform .25s;
     -moz-transition: transform .25s;
     -ms-transition: transform .25s;
     -o-transition: transform .25s;
     transition: transform .25s;
 }
 
 .test:after {
     position: absolute;
     right: 15px;
     top: 18px;
     width: 0;
     height: 0;
     content: "";
     border-width: 6px 6px 0 6px;
     border-style: solid;
     border-color: #fff transparent;
     -webkit-transition: all .25s;
     -moz-transition: all .25s;
     -ms-transition: all .25s;
     -o-transition: all .25s;
     transition: all .25s;
 }
 
 .test.active:before {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     transform: rotate(180deg);
 }
 
 .test.active:after {
     top: 20px;
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     transform: rotate(180deg);
 }
 
 .test .dropdown {
     position: absolute;
     right: 0;
     left: 0;
     display: none;
     padding: 0;
     border-radius: inherit;
     border: 1px solid #d2d2d2;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, .4);
 }
 
 .test.active .dropdown {
     display: block;
 }
 
 .test .dropdown:before {
     position: absolute;
     right: 13px;
     bottom: 100%;
     width: 0;
     height: 0;
     content: "";
     border-width: 0 8px 8px 8px;
     border-style: solid;
     border-color: #d2d2d2 transparent;
 }
 
 .test .dropdown:after {
     position: absolute;
     right: 15px;
     bottom: 100%;
     width: 0;
     height: 0;
     content: "";
     border-width: 0 6px 6px 6px;
     border-style: solid;
     border-color: #fff transparent;
 }
 
 .test .dropdown li:first-of-type {
     border-radius: 3px 3px 0 0;
 }
 
 .test .dropdown li:last-of-type {
     border-radius: 0 0 3px 3px;
 }
 
 .test .dropdown li:hover {
     color: #fff;
     background: rgb(255, 148, 48, 1);
 }

 HTML部分代码：

    

        分析日期
        

            
• 近15天

            
• 近6个月

        

    

 如果有错希望大家多多指正，我们多多交流