动手加上实用而简单的目录树

友人C

2016 年 09 月 19 日

27657 次浏览

25 条评论

3562字数

typecho

其实就是想想试试PS的制作长阴影的插件==（传送门：http://lab.rayps.com/lsg/）

也是记录下来。

HTML结构

<tree id="mulu"></tree>

说明一下：

把这段代码插到post.php 文章内容的div下面即可！
把代码中的#haha改成你的文章内容div 的 ID。
调用文章内容的php代码是 <?php parseContent($this); ?>即，用div层把这段内容包括起来就行。

代码来自这篇文章：js为博客文章自动生成目录

JS 代码

function GenerateContentList() {
    var mainContent = $("#mulu");
    var h1_list = $("#haha h1");
    var h2_list = $("#haha h2");
    if (mainContent.length < 1) {
        return
    }
    if (h1_list.length > 0) {
        var content = "";
        content += "";
        content += ' <a class="title_menue">[文章目录]</a>';
        content += '<ol class="toc">';
        for (var i = 0; i < h1_list.length; i++) {
            var go_to_top = '<a name="_label' + i + '"></a>';
            $(h1_list[i]).before(go_to_top);
            var h2_list = $(h1_list[i]).nextAll("h2");
            var li2_content = "";
            for (var j = 0; j < h2_list.length; j++) {
                var tmp = $(h2_list[j]).prevAll("h1").first();
                if (!tmp.is(h1_list[i])) {
                    break
                }
                var li2_anchor = '<a pjax="no" name="_label' + i + "_" + j + '"></a>';
                $(h2_list[j]).before(li2_anchor);
                li2_content += '<li class="toc-item toc-level-' + i + "_" + j + '"><a pjax="no" class="toc-link" href="#_label' + i + "_" + j + '"><span class="toc-text">' + $(h2_list[j]).text() + "</span></a></li>"
            }
            var li1_content = "";
            if (li2_content.length > 0) {
                li1_content = '<li class="toc-item toc-level-' + i + '"><a pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h1_list[i]).text() + '</span></a></li><ol class="toc-child">' + li2_content + "</ol>"
            } else {
                li1_content = '<li class="toc-item toc-level-' + i + '"><a  pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h1_list[i]).text() + "</span></a></li>"
            }
            content += li1_content
        }
        if ($("#mulu").length != 0) {
            $($("#mulu")[0]).prepend(content)
        }
    } else {
        if (h1_list.length == 0 && h2_list.length > 0) {
            var content = "";
            content += "";
            content += '<a class="title_menue">[文章目录]</a>';
            content += '<ol class="toc">';
            for (var i = 0; i < h2_list.length; i++) {
                var go_to_top = '<a  pjax="no" name="_label' + i + '"></a>';
                $(h2_list[i]).before(go_to_top);
                var h3_list = $(h2_list[i]).nextAll("h3");
                var li3_content = "";
                for (var j = 0; j < h3_list.length; j++) {
                    var tmp = $(h3_list[j]).prevAll("h2").first();
                    if (!tmp.is(h2_list[i])) {
                        break
                    }
                    var li3_anchor = '<a  pjax="no" name="_label' + i + "_" + j + '"></a>';
                    $(h3_list[j]).before(li3_anchor);
                    li3_content += '<li class="toc-item toc-level-' + i + "_" + j + '"><a pjax="no" class="toc-link" href="#_label' + i + "_" + j + '"><span class="toc-text">' + $(h3_list[j]).text() + "</span></a></li>"
                }
                var li2_content = "";
                if (li3_content.length > 0) {
                    li2_content = '<li class="toc-item toc-level-' + i + '"><a pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h2_list[i]).text() + '</span></a></li><ol class="toc-child">' + li3_content + "</ol>"
                } else {
                    li2_content = '<li class="toc-item toc-level-' + i + '"><a pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h2_list[i]).text() + "</span></a></li>"
                }
                content += li2_content
            }
            if ($("#mulu").length != 0) {
                $($("#mulu")[0]).prepend(content)
            }
        }
    }
}
GenerateContentList();

CSS代码

我根据小伙伴|真|以歌。先生的目录树基础上写的。

悬浮在文章右侧，你可以根据你的主题进行修改。

#mulu {
    float: right;
    margin-left: 10px;
    background: #f8f8f8;
    position: relative;
    z-index: 100
}

span.toc-text {
    color: #707070
}

span.toc-text:hover {
    color: #adadad;
}

ol.toc {
    padding-left: 15px;
    margin-left: 6px;
    margin-top: 0
}

a.title_menue {
    padding-left: 10px
}

.toc-item {
    margin-left: 10px;
    margin-right: 10px
}

撒花！！动手起来，开始享受你的文章目录树吧！