一个让Markdown-Post的标题拥有Collapse功能的JS
直接把鼠标放在这篇文章下方的header上,点击标题左侧的icon就可以看到效果
Updated 2017-01-13 17:34:55, 代码优化
懒得翻译了直接看下方Github的Readme吧
Github: https://github.com/szhielelp/md-post-header-collapse
Add JS and CSS to your project.
Recommend to put after other JS files.
$.headerCollapseRobot(
arr_Id_CollapseEnds = new Array("end"),
arr_Collapsible_Tag = new Array("H1","H2","H3"),
arr_ExcludeElemPrefix_InCollapsible = new Array("comment-"),
arr_ExcludeElemPrefix_InCollapsing = new Array("sidebar-toc-Ik4D-")
)
Mouseon the header you want to collapse/expand an icon will show.
Click the icon to collapse/expand
Sometimes the posts don’t have specific ending tag. You can set BreakId
to set the ending elem, otherwise it will collapse all elem after last header.
Here is an exam to stop at an elem id= thisIsTheBreakId
when you click the last header.
var arr_Id_CollapseEnds = new Array("thisIsTheBreakId");
If you don’t want specific elems to collapse, add some id prefix for those elems and add ignorePrefix here
var arr_ExcludeElemPrefix_InCollapsing = new Array("IDPrefix");
Same as Exclude Elem in Collapsing
, the header id with prefix in this array won’t active collapsible and no icon added near this header.
To set the level of header which need to be collapse
It have been set to H1
-H3
by default. Absolutely the header inside quote will be ignored.
var arr_Collapsible_Tag = new Array("H1","H2","H3");
If wanna add H4
you also need to add for CSS
h1:hover span.headerbtn,
h2:hover span.headerbtn,
h3:hover span.headerbtn{
opacity: 1;
visibility: visible;
}
遇到Bug可以提交到本页面