在MarkDown文档中添加jQuery折叠面板
0 条评论折腾Hexo博客,做了个软件整理收集页,在首席前端顾问蔡老板的指点下,终于实现了文章中使用折叠面板的功能,现记录如下.
因为想整站都有这样的效果,所以直接集成到使用的主题中,本站使用的是maupassant主题,其他主题应该大同小异,仅供参考.
改造主题
新建定义class
或id
的js,如我新建了个accordion.js
,里面的内容如下1
2
3$(function() {
$( ".accordion" ).accordion();
});
如果用<div id=accordion>
定义,那么需改成#accordion
1
2
3$(function() {
$( "#accordion" ).accordion();
});
在主题目录/layout/_partial/after_footer.jade
后面添加如下代码1
2
3link(rel='stylesheet', href='//cdn.bootcss.com/jqueryui/1.10.4/themes/smoothness/jquery-ui.css')
script(type='text/javascript', src='//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js')
script(type='text/javascript', src=url_for(theme.js) + '/accordion.js')
上面的src=url_for(theme.js) + '/accordion.js'
表示引用的主题放js的目录下的accordion.js
文章中添加折叠class
将需要折叠的内容用<div>
引用起来,如要隐藏二级标题下的内容,就类似于下面这样
1 | <div class="accordion"> |
结合主题的修改,此时该文章就会在初次打开时展开第一个内容块,点击隐藏y
则展开对应的内容,同时其他内容隐藏.效果如下演示
如果块引用里面有不同的层级,如
h2
和h3
混合,会出现样式错乱,不知道怎么搞,所以把层级都搞成一样即可.
注意如果要隐藏的是表格,在MarkDown文档编辑时记得在<div>
下面留出一行空行,否则会导致MarkDown格式不识别.
样式改进
直接上面的做法会发现存在以下问题
- 标题和内容之间有间隙
- 展开框高度固定—也不知道在哪改
- 最后还有一行空白
我们可以在主题style.css
中添加样式解决1
2
3
4
5
6
7
8
9
10
11
12/*表格高度自适应*/
.accordion table {
height: 100% ;
}
/*隐藏空行*/
p.ui-accordion-header:last-child {
display:none
;}
/*去掉标题下面的间隙*/
.post .post-content h2 {
margin: 1.4em 0 0em;
}
前面主题中直接引用的jquery-ui.css
,里面一堆样式其实是用不到的,可以按自己的需求挑选需要的部分直接写在主题的style.css
中,但某些图标什么的也相应的需要下载,各有利弊.
最后效果见给父老乡亲的软件宝库