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屬性，發布以后就能自動生成二級目錄了。

　　效果圖，這里我將目錄設置成了固定在右側頂部，這樣就不會影響閱讀了。