博客改装第二弹,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 的时候切换 wrapwidget-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
    

    大致效果:

    效果1

  3. 调整 wrap 边距

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

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

    此时效果如图:

    效果2

  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)
    

    大功告成!

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

# 相关文件下载

压缩包下载