一个让Markdown-Post的标题拥有Collapse功能的JS

直接把鼠标放在这篇文章下方的header上，点击标题左侧的icon就可以看到效果

Updated 2017-01-13 17:34:55, 代码优化

懒得翻译了直接看下方Github的Readme吧

Github & Bug Report

Github: https://github.com/szhielelp/md-post-header-collapse

Requirements

1. Bootstrap
2. Standard Jekyll/Hexo Post based on Markdown

Installation

Add JS and CSS to your project.

Recommend to put after other JS files.

Usage

 $.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

Turning

BreakId

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");

Exclude Elem in Collapsing

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");

Exclude Elem for Collapsible

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.

Collapsible Header Level

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可以提交到本页面