jquery展开、折叠菜单，支持一键展开、折叠

之前有朋友问到，趁现在无聊（主要是太久没更新），来简单说一下这个jquery展开、折叠菜单，其实大家也可以右键直接看源码的。

这主要是三部分，html、CSS、jquery：

HTML部分

<div class="Switch">
<span id="al_expand_collapse">全部展开/折叠</span><em> (注:点击月份可以展开.)</em>
</div>
<div id="archives">
<ul class="al_mon_list">
    <li>
        <span class="al_mon">2016年07月<em>( 2篇文章 )</em></span>
        <ul class="al_post_list">
            <li><time>31日:</time><a href="https://freexyz.cn/76.html" title="2016.07.31">2016.07.31</a><span class="muted"><em>(0)</em></span></li>
            <li><time>12日:</time><a href="https://freexyz.cn/75.html" title="找呀找呀找工作">找呀找呀找工作</a><span class="muted"><em>(7)</em></span></li>
        </ul>
    </li>
</ul>
<ul class="al_mon_list">
    <li>
        <span class="al_mon">2016年07月<em>( 2篇文章 )</em></span>
        <ul class="al_post_list" style="display: none;">
            <li><time>31日:</time><a href="https://freexyz.cn/76.html" title="2016.07.31">2016.07.31</a><span class="muted"><em>(0)</em></span></li>
            <li><time>12日:</time><a href="https://freexyz.cn/75.html" title="找呀找呀找工作">找呀找呀找工作</a><span class="muted"><em>(7)</em></span></li>
        </ul>
    </li>
</ul>
</div>

CSS部分

.switch>em{font-weight: 600;color: #777;}
.switch{padding-bottom:16px;}
#al_expand_collapse{cursor: pointer;background: #58749C;color: #FFFFFF;font-weight: 700;font-size: 14px;padding: 6px 6px;margin-left: 20px;border-radius: 3px 3px 3px 3px;}
#archives>ul>li{list-style: none !important;padding: 0 20px 12px 20px;margin-left: 0px !important;}
#archives>ul>li>ul>li{list-style: none !important;padding: 6px 0;border-bottom: 1px solid #CCC;}
.al_mon_list {width: 100%;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
#archives .al_mon_list li .al_mon {border-left: 3px solid #58749c;padding-left: 10px;font-weight: 700;display: block;border-bottom: 1px solid #CCC;-webkit-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;}
#archives .al_mon_list li .al_mon em{font-weight: 400;color: #777;}

JQUERY部分

(function($, window) {
    $(function() {
        var $a = $('#archives'),
        $m = $('.al_mon', $a),
        $l = $('.al_post_list', $a),
        $l_f = $('.al_post_list:first', $a);
        $l.hide();
        $l_f.show();
        $m.css('cursor', 'pointer').on('click',
        function() {
            $(this).next().slideToggle(400);
        });
        var animate = function(index, status, s) {
            if (index > $l.length) {
                return;
            }
            if (status == 'up') {
                $l.eq(index).slideUp(s,
                function() {
                    animate(index + 1, status, (s - 10 < 1) ? 0 : s - 10);
                });
            } else {
                $l.eq(index).slideDown(s,
                function() {
                    animate(index + 1, status, (s - 10 < 1) ? 0 : s - 10);
                });
            }
        };
        $('#al_expand_collapse').on('click',
        function(e) {
            e.preventDefault();
            if ($(this).data('s')) {
                $(this).data('s', '');
                animate(0, 'up', 100);
            } else {
                $(this).data('s', 1);
                animate(0, 'down', 100);
            }
        });
    });
})(jQuery, window);

没什么好说的，只是方便一些新手朋友的操作而已。

上面代码都是在本站点上直接copy过来的，有需要的朋友拿去用时候可以根据自己要求更改样式即可。