由Anyplayer插件中视频展开与收起的功能得到启发,尝试将这种折叠功能应用于文章中各类元素。
提到折叠功能绝对会让人想起大名鼎鼎的jQuery,用它实现的折叠功能具有平滑展开与收起的效果。

1.加载jQuery库

<script src="jquery-3.3.1.min.js"></script>

(已加载过的请无视)

2.加载JS文件foldcontent.js

foldcontent.js文件内容:

jQuery(function($){
$(‘.foldcontent-title’).css({cursor:”s-resize”});
$(‘span.foldcontent-title’).click(function(){
$(this).next(‘div’).slideToggle(‘500’);return false; // 注意下一个’div’即为折叠内容的尾部
});
});

3.加入代码

加入至functions.php文件中适当位置

PHP代码:

function shortcodefoldcontent($atts,$content = null) {
extract(shortcode_atts(array(“id”=>”,”title”=>”),$atts));
$scfccd = ‘fa fa-file-code-o’;
$scfcpe = ‘fa fa-file-picture-o’;
return ‘<div id=”foldcontent”><span class=”foldcontent-title” id=”‘.$id.'” title=”OPEN/CLOSE”><div style=”float:right”><i class=”‘.$$id.'”></i></div><div style=”float:left”>’.$title.'</div></span><div class=”foldcontent-content” style=”display:block;”>’.$content.'</div></div>’;
}
add_shortcode(“scfc”,”shortcodefoldcontent”);

4.加入样式

加入至 style.css文件中:

css代码:

.foldcontent{}
.foldcontent-title{overflow:auto;white-space:nowrap;}
#scfccd,#scfctxt,#scfcvd,#scfcpe{
display:block; /*– 滑动初始效果 –*/
background-repeat:no-repeat; /*– 背景图片不重复 –*/
position:relative; /*– 定位 –*/
color:#00c; /*– 标题默认颜色 –*/
}
#scfccd:hover,#scfctxt:hover,#scfcvd:hover,#scfcpe:hover{
color:#e14d43; /*– 鼠标经过变色 –*/
}
.foldcontent-content{
display:block;
}

5.食用方式

[scfc id=”” title=””]内容[/scfc]

/** 参数:
scfccd:代码图标
scfctxt:文档图标
scfcvd:视频图标
scfcpe:图片图标
// 可自行添加样式
*/
[tip type=”error” ]

注:文章中无法实现短代码套嵌,如

[scfc id=”scfcvd” title=””][scpr]video.flv[/scpr][/scfc]

[/tip]

至此,大功告成~