在MarkDown文档中添加jQuery折叠面板

折腾Hexo博客,做了个软件整理收集页,在首席前端顾问蔡老板的指点下,终于实现了文章中使用折叠面板的功能,现记录如下.

因为想整站都有这样的效果,所以直接集成到使用的主题中,本站使用的是maupassant主题,其他主题应该大同小异,仅供参考.

改造主题

新建定义class或id的js,如我新建了个accordion.js,里面的内容如下

$(function() {
  $( ".accordion" ).accordion();
});

如果用<div id=accordion>定义,那么需改成#accordion

$(function() {
  $( "#accordion" ).accordion();
});

在主题目录/layout/_partial/after_footer.jade后面添加如下代码

link(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>引用起来,如要隐藏二级标题下的内容,就类似于下面这样

<div class="accordion">

##  隐藏x

隐藏内容x

##  隐藏y

隐藏内容y
</div>

结合主题的修改,此时该文章就会在初次打开时展开第一个内容块,点击隐藏y则展开对应的内容,同时其他内容隐藏.效果如下演示

隐藏x

隐藏内容x

隐藏y

隐藏内容y

如果块引用里面有不同的层级,如h2和h3混合,会出现样式错乱,不知道怎么搞,所以把层级都搞成一样即可.

注意如果要隐藏的是表格,在MarkDown文档编辑时记得在<div>下面留出一行空行,否则会导致MarkDown格式不识别.

样式改进

直接上面的做法会发现存在以下问题

1. 标题和内容之间有间隙
2. 展开框高度固定—也不知道在哪改
3. 最后还有一行空白

我们可以在主题style.css中添加样式解决

/*表格高度自适应*/
.accordion  table {
      height: 100% !important;
}
/*隐藏空行*/
p.ui-accordion-header:last-child {
      display:none
;}
/*去掉标题下面的间隙*/
.post .post-content h2 {
    margin: 1.4em 0 0em;
}

前面主题中直接引用的jquery-ui.css,里面一堆样式其实是用不到的,可以按自己的需求挑选需要的部分直接写在主题的style.css中,但某些图标什么的也相应的需要下载,各有利弊.

最后效果见给父老乡亲的软件宝库

参考文档

折叠面板（Accordion）
使用 Hexo 搭建博客的深度优化与定制