Requirements

Bootstrap
标准的基于Markdown的Jekyll/Hexo Post

Installation

导入JS和CSS就行

建议将JS 放在最后，可能其他相关JS的导入会影响Collapse功能

Setting

BreakId

某些时候文章没有特定的结尾，因此可能需要设定特定的结尾elem来进行判断，否则会将最后一个Header后面的所有内容都collapse掉

例如此处我将友言评论的框作为结尾elem，因此到友言评论之后就不会被collapse

1	`var` `arrBreakId =` `new` `Array("uyan");`

Collapsible Header Level

设置Collapsible的Header的Level

默认是H1-H3

var arrCollapsableTag = new Array("H1","H2","H3");

// var excludeTagList = new Array("");

$('h1, h2, h3').each(function(index, el)……

修改的时候也需要将CSS进行一定的修改

h1:hover span.headerbtn,

h2:hover span.headerbtn,

h3:hover span.headerbtn{

opacity: 1;

visibility: visible;

}

把H4加到后面就能实现H1-H4实现Collapse

Github & Bug Report

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

遇到Bug可以提交到本页面

Markdown渲染后文章标题收缩控件的更多相关文章

Duilib 鼠标在某控件例如按钮上悬停后，对目标控件操作
其实对WM_MOUSEHOVER消息的处理,因为WindowImplBase基类中对此消息未处理,所以在自己的窗口类中实现: .h文件中加入 LRESULT OnMouseHover( UINT uM ...
winform在设置控件enabled=false后，无法更改控件字体颜色的问题
项目界面设计的时候,发现在设置button的enabled=false后,原本设计的字体颜色跟预设的不一样,查了一些资料后,在网上看到这样一段代码: [System.Runtime.InteropSe ...
TGraphicControl（自绘就2步，直接自绘自己，不需要调用VCL框架提供的函数重绘所有子控件，也不需要自己来提供PaintWindow函数让管理框架来调用）与TControl关键属性方法速记（Repaint要求父控件执行详细代码来重绘自己，还是直接要求Invalidate无效后Update刷新父控件，就看透明不透明这个属性，因为计算显示的区域有所不同）
TGraphicControl = class(TControl) private FCanvas: TCanvas; procedure WMPaint(var Message: TWMPaint) ...
ASP.NET MVC加载用户控件后并获取其内控件值或赋值
有网友看了这篇<ASP.NET MVC加载ASCX之后,并为之赋值>http://www.cnblogs.com/insus/p/3643254.html 之后,问及Insus.NET,不 ...
02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定
vue基础声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 Example1 <!DOCTYPE html> <html> ...
安装SqlServer2008后vs中dev控件消失
点击红的的
Flutter ExpansionPanel 可展开的收缩控件
文档:https://api.flutter.dev/flutter/material/ExpansionPanel-class.html demo: import 'package:flutter/ ...
Qt5 UI信号、槽自动连接的控件重名大坑（UI生成的槽函数存在一个隐患，即控件重名。对很复杂的控件，不要在 designer 里做提升，而是等到程序启动后，再动态创建，可以避免很多问题）
对Qt5稍有熟悉的童鞋都知道信号.槽的自动连接机制.该机制使得qt designer 设计的UI中包含的控件,可以不通过显式connect,直接和cpp中的相应槽相关联.该机制的详细文章见 http: ...
PropertyGrid控件由浅入深(一)：文章大纲
Winform中PropertyGrid控件是一个非常好用的对象属性编辑工具,对于Key-Value形式的数据的处理也是非常的好用. 因为Property控件设计良好,在很小的空间内可以展示很多的内容 ...

随机推荐

NCreport报表控件教程：设计页眉和页脚
一.设计页眉一般来说页眉部分一般是用于包含标题的内容, 首先我们会添加列标签到页眉部分,标签都是简单的文本,标签项一般是用于在报表上显示一些描述信息,标签都是静态项,所以它们的值不会有变化. 添加标 ...
从零开始调用一个手机号归属地查询API
自从过上程序员的生活,身边总是或多或少的提及一些API(应用程序接口),网上各种入门教程.实例大把大把,有的只是贴上部分代码,也不给注释, 写Demo的时候连编译都无法通过.下面我从小白开始来介绍下调 ...
PHP动态图像的创建要如何实现呢？
with-gd=[/path/to/gd] --with-jpeg-dir=[/path/to/jpeg-6b] --with-t1lib=[/path/to/t1lib] 完成添加后执行make命 ...
js阻止form表单重复提交
防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交:另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单 ...
java中的23中设计模式（转）
设计模式(Design Patterns) --可复用面向对象软件的基础设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...
python学习之迭代器与生成器
1.迭代器省内存迭代器只允许往后读数据,不允许回读数据迭代器不能跳着读文件,因为他是一点一点加载文件内容到内存的,读完了可以销毁或丢掉 2.生成一个迭代器 a = iter(["fd&q ...
js sql C#时间、时间戳相互转换
js. sql. C#时间.时间戳相互转换 //1.获取当前时间戳_c# ) / //2.时间戳->时间 C# DateTime b11 = GetTime(");//11位时间戳-& ...
Magnifier笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
java里面interface，implement和extends的作用和用法
今天阅读<设计模式示例>,看到一段代码涉及到了interface,implements和extends,其实在C++中经常用到.今天特百度,比较了一下: interface是一个接口,类似 ...
hive的使用03
1.hive中的四种排序 1.1 order by :对全局进行排序,只能有一个reduce select * from hive.employee order by id;

Markdown渲染后文章标题收缩控件