归档伸缩展示

文章多了以后归档页面特别长，又无法实现分页，typecho归档页面大部分是靠插件实现，非插件也有相似的代码，大部分效果不理想，经过折腾，终于实现只显示当月文章其他全部隐藏，并且可以按年，月展开和隐藏，每篇文章都显示发布日期

<?php $this->widget('Widget_Contents_Post_Recent', 'pageSize=10000')->to($archives);
    $year=0; $mon=0; $day=0;
    $output = '<div class="archives-content">';
    while($archives->next()):
        $year_tmp = date('Y',$archives->created);
        $mon_tmp = date('m',$archives->created);
        $day_tmp = date('d',$archives->created);
        $y=$year; $m=$mon; $d=$day;
        if ($day != $day_tmp && $day > 0) $output .= '</li>';
        if ($mon != $mon_tmp && $mon > 0) $output .= '</ul></li>';
        if ($year != $year_tmp && $year > 0) $output .= '</ul>';
        if ($year != $year_tmp) {
            $year = $year_tmp;
            $output .= '<div><span class="archives-title archives-year">'. $year .' 年</span><ul class="year-post-list">';
        }
        if ($mon != $mon_tmp) {
            $mon = $mon_tmp;
            $output .= '<li><span class="archives-title">'. $year .' 年 '. $mon .' 月</span><ul class="mon-post-list">';
        }
        if ($day != $day_tmp) {
            $day = $day_tmp;
            $output .= '';
        }
        $output .= '<li><span>'. $mon .'/'. $day .'</span>&nbsp;<a href="'.$archives->permalink .'" >'. $archives->title .'</a>&nbsp;<sup>'. $archives->commentsNum.'</sup></li>';
    endwhile;
    $output .= '</ul></li></ul></div>';
    echo $output;
?>

<script type="text/javascript">
(function ($, window) {
$(function() {
  var $a = $('.archives-content'),
  $m = $('.archives-title', $a),
  $l = $('.mon-post-list', $a),
  $l_f = $('.mon-post-list:first', $a);
  $l.hide();$l_f.show();
  $r = $('.year-post-list', $a),
  $r_f = $('.year-post-list:first', $a);
  $r.hide();$r_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);
      });
    }
  };
});
})(jQuery, window);
</script>

.archives-content span {
    display:inline-block;
    width:max-content;
}
.archives-title {
    margin:3px 0;
}
.year-post-list {
    margin:5px 0;
}
.mon-post-list {
    margin:5px 0 10px 0;
}
.mon-post-list li {
    padding:5px 0;
}
.mon-post-list li span {
    font-weight:normal;
    font-style:normal;
}