年月的下拉折叠选择器

做一个时间选择器的轮子，自动生成年月和折叠打开功能。

一、自动生成年月

            var date = new Date, 
                year = date.getFullYear();
            var elements = '';
            for (var i = year; i > 2010; i--) {
                var month = '';
                for (var j = 1; j < 13; j++) {
                    month += '<div> <a href="#" value=' + i + '>' + j + '月</a></div>'
                }
                elements += ' <div class="menuParent">'
                    + '<div class="ListTitlePanel">'
                    + '  <div class="ListTitle">'
                    + '     <strong>' + i + '年</strong>'
                    + '<div class="leftbgbt2"> </div>'
                    + '</div>'
                    + '</div>'
                    + '<div class="menuList">'
                    + month
                    + '</div>'
                    + '</div>'
            }

二、时间点击事件

        // 时间点击事件
            var menuParent = $('.menu > .ListTitlePanel > div');//获取menu下的父层的DIV
            var menuList = $('.menuList');
            $('.menu > .menuParent > .ListTitlePanel > .ListTitle').each(function (i) {//获取列表的大标题并遍历
                $(this).click(function () {
                    if ($(menuList[i]).css('display') == 'none') {
                        $(menuList[i]).slideDown(300);
                        for (var m = 0; m < menuList.length; m++) {
                            if (m != i) {
                                $(menuList[m]).slideUp(300);// 遍历所有menuList,让所有不属于当前元素的不展示
                            }
                        }
                    }
                    else {
                        $(menuList[i]).slideUp(300);
                    }
                });
            });

三、样式部分

<style type="text/css">
        body {
            margin: 0;
            padding: 0;
            font-size: 12px;
            font-family: "Microsoft Yahei", Verdana, Arial, Helvetica, sans-serif
        }

        .leftMenu {
            min-width: 220px;
            width: 268px;
            margin: 40px auto 0 auto;
        }

        .menu {
            border: #bdd7f2 1px solid;
            border-top: #0080c4 4px solid;
            border-bottom: #0080c4 4px solid;
            background: #f4f9ff url(images/leftdhbg.jpg) repeat-y right;
            margin-left: 10px;
        }

        .menu .ListTitle {
            border-bottom: 1px #98c9ee solid;
            display: block;
            text-align: center;
            /*position: relative;*/
            height: 38px;
            line-height: 38px;
            cursor: pointer;
            /*+min-width:220px;*/

            width: 100%;
        }

        .ListTitlePanel {
            position: relative;
        }

        .leftbgbt {
            position: absolute;
            /* background: url(images/leftbgbt.jpg) no-repeat; */
            width: 11px;
            height: 52px;
            left: -11px;
            top: -4px;
        }

        .leftbgbt2 {
            position: absolute;
            /* background: url(images/leftbgbt2.jpg) no-repeat; */
            width: 11px;
            height: 48px;
            left: -11px;
            top: -1px;
        }

        .menuList {
            display: block;
            height: auto;
        }

        .menuList div {
            height: 28px;
            line-height: 24px;
            border-bottom: 1px #98c9ee dotted;
        }

        .menuList div a {
            display: block;
            background: #fff;
            line-height: 28px;
            height: 28px;
            text-align: center;
            color: #185697;
            text-decoration: none;
        }

        .menuList div a:hover {
            color: #f30;
            background: #0080c4;
            color: #fff;
        }

        .menuList {
            display: none
        }
    </style>

四、效果

在线效果