Hexo Widget折叠效果

博客改装第二弹，Widget 折叠效果

# 涉及文件

	themes/landscape-plus/source
	- /js/script.js
	- /css/_partial/sidebar-aside.styl

# 涉及元素结构

	<div class="widget-wrap">
	<h3 class="widget-title">标题</h3>
	<div class="widget">内容</div>
	</div>

# 简要思路

其实方法说来挺简单，就是点击 title 的时候切换 wrap 的 widget-hidden 类，让 widget 隐藏，同时更改 wrap 的外边距

大体步骤

注册 Widget 标题的点击回调
添加样式表

其实主要部分都是在玩 CSS...

(说来才发现 jQuery 是真的好用)

为了达到折叠效果，首先我们需要选择合适的元素作为折叠 / 展开的按钮

在 script.js 中添加如下代码：

	// Widget click-expand
	$('.widget-title').on('click',function(){
	$(this).parent().toggleClass('widget-hidden');
	});

# 相关语法

$(selector).on(event,childSelector,data,function)

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate () 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。

# 第二步：添加样式表

给相关元素添加过渡效果

既然是折叠 / 展开而不是隐藏 / 显示，那么就一定会有~~精美的~~动画

故向三个元素添加样式
```
transition-duration: 0.4s
```
隐藏 widget:

接下来就是隐藏啦

为了使内容隐藏完全的同时不使文字的动画过于僵硬，我们需要将上下内边距设置为 0，同时
保留左右内边距
```
.widget-hidden > .widget
  height: 0
  padding: 0 15px 0 15px
  overflow: hidden
```
大致效果：
调整 wrap 边距

此时我们发现，折叠后的 Widget 与下方的间距有点大，于是需要调整
下边距和相邻 Widget 的上边距
```
.widget-hidden
    margin-bottom: 8px

.widget-hidden + .widget-wrap
    margin-top: 8px
```
此时效果如图：
添加折叠按钮

写到这里，感觉好像还没内味儿

啊对了，还没有添加折叠按钮

由于~~我懒得找图片~~用 border + transform 可以快速做出效果较好的折叠按钮，
我就采用了这种办法

添加 .widget-wrap 和 .widget-hidden 的 ::before 样式如下
```
.widget-wrap
  &:before
    content: ""
    width: 6px
    height: 6px
    border: solid #999
    border-width: 0 2px 2px 0
    transform: translate(-50%, -50%) rotate(45deg)
    float: left
    margin: 3px
    transition-duration: 0.4s
    pointer-events: none

.widget-hidden
  &:before
    transform: rotate(-45deg)
```
大功告成！

最终效果？在文章开头啊...

# 相关文件下载

压缩包下载