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的外边距

大体步骤

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

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

第一步: 注册Widget标题的点击回调

(说来才发现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 |可选。规定当事件发生时运行的函数。

第二步: 添加样式表

1. 给相关元素添加过渡效果

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

   故向三个元素添加样式

   transition-duration: 0.4s

2. 隐藏widget:

   接下来就是隐藏啦

   为了使内容隐藏完全的同时不使文字的动画过于僵硬，我们需要将上下内边距设置为0，同时
   保留左右内边距

   .widget-hidden > .widget
     height: 0
     padding: 0 15px 0 15px
     overflow: hidden

   大致效果：

   

3. 调整wrap边距

   此时我们发现，折叠后的Widget与下方的间距有点大，于是需要调整
   下边距和相邻Widget的上边距

   .widget-hidden
       margin-bottom: 8px
   
   .widget-hidden + .widget-wrap
       margin-top: 8px

   此时效果如图：

   

4. 添加折叠按钮

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

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

   由于我懒得找图片用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)

   大功告成！

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

相关文件下载

压缩包下载