Jquery实现自动生成二级目录

　　在博客园开通博客以后，就看到某位博友写的js自动生成目录的文章，当时觉得生成目录能给阅读带来方便，所以就直接拿来使用了。用了一段时间以后，发现只能生成一级目录，不能生成多级目录，有点美中不足。所以想着自己修改一下代码，实现二级目录甚至三级目录。先附上初始的代码，并且在这感谢那位博友。

1、一级目录代码

<script language="javascript" type="text/javascript">
//生成目录索引列表
function GenerateContentList()
{
    var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章节标题不是h3,只需要将这里的h3换掉即可
    if(jquery_h3_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content    += '<div id="navCategory">';
        content    += '<p style="font-size:18px"><b>阅读目录</b></p>';
        content    += '<ul>';
        for(var i =0;i<jquery_h3_list.length;i++)
        {
            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
            $(jquery_h3_list[i]).before(go_to_top);
            var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
            content += li_content;
        }
        content    += '</ul>';
        content    += '</div>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }    
}
GenerateContentList();
</script>

2、二级目录代码

　　上段代码只能生成一级目录，下面附上自己修改生成二级目录的源码，h3标签为一级，h4标签为二级。有需要的朋友，可以拿去修改修改再使用。

<!--目录CSS样式-->
<style type="text/css"> 
.moveBar {
    right:0; 
    top:0;
    border: solid 1px #777;
    width:200px; 
    position:fixed; 
    padding:5px; 
    text-align:center; 
    font-weight:bold; 
}</style>

<!--生成目录-->
<script language="javascript" type="text/javascript">
//生成目录索引列表
function GenerateContentList()
{
    var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章节标题不是h3,只需要将这里的h3换掉即可
    if(jquery_h3_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content    += '<div class="moveBar" style="color:#777;" ><div id="banner"><p style="font-size:18px"><b>阅读目录</b></p> 
        </div><div class="content"> ';
        content    += '<ul style="list-style-type:none;text-align: left;margin:2px 2px;">';
        for(var i =0;i<jquery_h3_list.length;i++)
        {
            var go_to_top = '<div style="text-align: right"><a name="_lab' + i + '"></a></div>';
            $(jquery_h3_list[i]).before(go_to_top);
            var li_content = '<li><a href="#_lab' + i + '">' + $(jquery_h3_list[i]).text() + '</a>';
            var jquery_h4_list = $(jquery_h3_list[i]).nextUntil(jquery_h3_list[i+1], "h4");
            if(jquery_h4_list.length>0)
            {
                li_content +='<ul style="list-style-type:none;text-align: left;margin:2px 2px;">';
            }
            for(var j = 0;j < jquery_h4_list.length;j++)
            {
                var go_to_top2 = '<div style="text-align: right"><a name="_lab2'+ i + j + '"></a></div>';
                $(jquery_h4_list[j]).before(go_to_top2);
                li_content +='<li><a href="#_lab2'+ i + j + '">' + $(jquery_h4_list[j]).text() + '</a></li>';
            }
            if(jquery_h4_list.length>0)
            {
                li_content +='</ul>';
            }
            li_content +='</li>';
            content += li_content;
        }
        content    += '</ul>';
        content    += '</div>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }    
}
GenerateContentList();
</script>

3、代码使用方法

• 博客园使用自己编写的js代码需要申请开通权限，先申请开通。
• 将二级代码中的CSS样式复制到页首Html代码框中。
• 将二级代码中的Jquery代码复制到页脚Html代码框中（其实复制到页首框也没影响）。
• 在写博客时，将一级标题设置标题3属性，将二级标题设置标题4属性，发布以后就能自动生成二级目录了。

　　效果图，这里我将目录设置成了固定在右侧顶部，这样就不会影响阅读了。