昨天在写文章的时候发现一个代码特别长，对于阅读文章而言造成了困扰，所以今天自定义了一个代码折叠动能（主要是没有找到现成的插件=_=）。

功能编写思路

首先我参考了一下博客园的代码折叠，然后看了一下我的代码都是在pre元素之下，那么我可以在代码块之上加一个折叠隐藏模块，但是给所有代码都加上明显是不合适的（有的代码就几行），那么最好的办法是超过一定长度的代码默认是隐藏的，然后给它加上折叠功能。

具体的实施

我们需要两个个折叠的图片。一个加号图片，一个减号图片，放在网站根目录下的images文件夹中。
js代码如下：

/*代码折叠功能var codeLength=$("pre code").size();
    for(var i=0;i<codeLength;i++){
        if($("pre code:eq("+i+")").height()>9){
        alert($("pre code:eq("+i+")").height());
         $("pre code:eq("+i+")").parent("pre").before('<div><div class="code_img_closed"></div><span class="cnblogs_code_collapse" style="display: inline;">View Code</span><div>'); 

        }
    }*/
    var codeLength=$("pre code").size();
    for(var i=0;i<codeLength;i++){
        if($("pre code:eq("+i+")").height()>900){
         $("pre:eq("+i+")").hide();
         $("pre code:eq("+i+")").parent().before('<div class="code_img_closed" style="display: none;">View/Hide Code</div>'); 

        }

    }
    $(".code_img_closed").click(function() {
            if($(this).next().css("display")=="none"){
                 $(this).next().show();

                 $(this).css("background-image","url(/images/jianBlock.gif)");
            }else {

                  $(this).next().hide();
                  $(this).css("background-image","url(/images/jiaBlock.gif)");
            }

        });

css代码如下：

/*代码折叠*/
.code_img_closed{
    display: inline-block !important;
margin-right: 10px !important;
background: url(/images/jiaBlock.gif) no-repeat left;
width: 180px;
height: 30px;
line-height: 30px;
padding-left: 20px;
background-color: #f9e6e6;
margin-bottom: 20px;

}

效果示例http://blog.shadowwu.club/2018/04/20/php_send_mail/

闲言碎语

虽然代码折叠功能比较简单，但是我们还是需要去锻炼的，自己造插件，造轮子，总好过伸手要，加油！