用jquery实现文章自动生成二级目录（续）

前文：用jquery实现文章自动生成二级目录。

使用方法的补充

我们可以把我们的js和css上传到博客园，然后在页面HTML代码中使用他们。

发现的一些问题

在我把我的js放到自己的博客园上运行之后发现了几个问题：

1. 博客园博客的子标题用的是h2，自动生成目录的js把博客的子标题也加入到了目录中。
2. 写了一篇比较长的博客，发现用目录跳到某处后没有链接返回目录处，有些不方便。
3. 每次写完文章还得在文章的HTML中加目录的div。

解决问题

参考：薰衣草的旋律的一篇文章。

1. 博客园子标题的问题，只要把一级标题的选择器改一下就好。
2. 在每个标题前面加上回到顶部的标签。
3. 在js中自己加div并放到文章所在层的开头。
4. 另外增加了一些css和js动画，让目录显示在页面右侧并且靠边。

最后的代码

js：

var flag = 0;
$(document).ready(function() {
    GenerateContents2();
    contents_show();
});

function GenerateContents() {
    var num = 0;
    var content = "<ul>";
    $("#cnblogs_post_body h3").each(function(){
        //原来是$("h2")
        content += "<li>" + GenerateA(num,$(this).text()) + "</li>";
        $(this).before(GenerateLabel(num));
        num++;
    });
    content += "</ul>"
    content = packeageContent(content);
    if($('#cnblogs_post_body').length != 0 )
    {
        $($('#cnblogs_post_body')[0]).prepend(content);
    }
}

function GenerateContents2() {
    var num = 0;
    var content = "<ul>";
    $("#cnblogs_post_body h3").each(function(){
        content += "<li>"+GenerateA(num,$(this).text());
        $(this).before(GenerateLabel(num));
        num++;

        var second = $(this).nextUntil("#cnblogs_post_body h3","#cnblogs_post_body h4");
        if (second) {
            content += "<ul>";
            second.each(function(){
                    content += "<li>"+GenerateA
                        (num,$(this).text())+"</li>";
                    $(this).before(GenerateLabel(num));
                    num++;
                }
            );
            content += "</ul>";
        };
        content += "</li>";
    });
    content += "</ul>";
    content = packeageContent(content);
    if($('#cnblogs_post_body').length != 0 )
    {
        $($('#cnblogs_post_body')[0]).prepend(content);
    }
}

//这两个函数本来想的是以后改着方便
function GenerateLabel(num) {
    var a = "<div><a name = 'label" + num + "'></a>";
    a += "<a href='#top' style='float:right'>回到顶部</a>"
    a += "</div>"
    return a;
}

function GenerateA(num ,text) {
    var ss = "<a href='" + "#label"
            + num +"'>" + text
            + "</a>";
    return ss;
}

function packeageContent(content) {
    var tmp = "<a name='top'></a>" ;
    tmp += "<div id='contents'>";
    tmp += "<div id='button'><b style='font-size:18px'>阅读目录</b></div>";
    tmp += "<div id='contents_main'>";
    tmp += content;
    tmp += "</div>";
    tmp += "</div>";
    return tmp;
}

function contents_show(){
    var button = $("#cnblogs_post_body #contents #button");
    $(button).click(
        function(){
            if (flag == 0) {
                $("#contents_main").show("slow");
                flag = 1;
            } else {
                $("#contents_main").hide("slow");
                flag = 0;
            }
        }
        );
}

css代码：

#cnblogs_post_body #contents {
    position: fixed;
    right: 0px;
    top: 454px;
    background-color: #FFF6DC;
    border: 2px solid #FEC447;
}

#contents_main a {
    height: 1.4em;
    display: block;
}

#cnblogs_post_body #contents #button {
    width: 2em;
    float: left;
    text-align: right;
}

#cnblogs_post_body #contents #button:hover {
    background-color: #fff;
}

#cnblogs_post_body #contents #contents_main {
    display: none;
    float: right;
}
#cnblogs_post_body a {
    text-decoration: none;
    color: #2769C0;
    padding: 1px 2px;
}
#cnblogs_post_body a:hover{
    color: #fff;
    background-color: #78AFD3;
    padding: 1px 2px;
}
#cnblogs_post_body ul li {
    list-style: inherit!important;
    margin-bottom: 0.1em;
}

虽然样式有点丑。。