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

headindex.png

二分法查找,应对目录量比较大的问题,比如做笔记的时候,一篇文章的目录可能会出现上百个的情况。

项目地址
查看演示

怎么使用?

step 1. 导入jqueryjquery.headindex

1
2
<script src="./js/jquery.3.3.1.js"></script>
<script src="../jquery.headindex.min.js"></script>

setp2.

1
2
3
4
5
6
7
$(function () {
$('.article-wrap').headIndex({
articleWrapSelector: '.article-content',//包裹文章的元素的选择器
indexBoxSelector: '.index-box',//用来放目录索引的元素的选择器
//other options
})
})

默认参数

1
2
3
4
5
6
7
8
9
10
11
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,/*滑动偏移量 按需求进行偏移*/
}

注意

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

1
offsetTop: function (elem) {

届时,offset可能失效。

如果对您有帮助,欢迎给个star。