jQuery插件,自动生成文章目录索引,手风琴式折叠显示,自动定位当前位置。

headindex.png

查看演示

怎么使用?

step 1. 导入jquery和jquery.headindex

<script src="./js/jquery.3.3.1.js"></script>
<script src="../jquery.headindex.min.js"></script>
$(function () {
    $(document).headIndex({
                articleWrapSelector: '.article-wrap',//包裹文章的元素的选择器
                indexBoxSelector: '.index-box',//用来放目录索引的元素的选择器
            });
})

默认参数

defaultOptions = {
        articleWrapSelector: ".article-wrap",/*包裹文章的选择器*/
        indexBoxSelector: ".index-box",/*包裹目录索引的选择器*/
        scrollSelector: 'body,html',/*滑动元素的选择器*/
        scrollWrap: window,/*能够监听到scrollSelector滑动的选择器*/

        subItemBoxClass: "index-subItem-box",
        itemClass: "index-item",
        linkClass: "index-link",
        offset: 0,/*滑动偏移量 按需求进行偏移*/
}

某些布局下,滚动时位置不准确的问题
这个需要自己手动适配一下,重写方法:

offsetTop: function (elem) {
    

届时,offset可能失效。

标签: 开源, JavaScript

添加新评论