2018年7月18日 星期三
通知
主页 / 荣耀日志 / WP文章添加展开/收缩

WP文章添加展开/收缩

效果预览:

WP文章添加展开/收缩

主题目录下找到header.php 文件,在之前添加以下代码
<script>jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});</script>

在打开主题目录下functions.php文件 最后一行添加以下代码
/* 展开收缩*/
function xcollapse($atts, $content = null){
extract(shortcode_atts(array("title"=>""),$atts));
return '<div style="margin: 0.5em 0;">
<div class="xControl">
<span class="xTitle">'.$title.'</span>
<a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a>
<div style="clear: both;"></div>
</div>
<div class="xContent" style="display: none;">'.$content.'</div>
</div>';
}
add_shortcode('collapse', 'xcollapse');
<div style="margin: 0.5em 0;">
<div class="xControl"><span class="xTitle">'.$title.'</span> <a class="collapseButton xButton">展开/收缩</a>
<div style="clear: both;"></div>
&nbsp;
</div>
&nbsp;
<div class="xContent" style="display: none;">'.$content.'</div>
</div>
'; } add_shortcode('collapse', 'xcollapse');

主题下的style.css,最后一行添加
.xControl {padding-left: 32px;}

在文章使用以下代码
[collapse title="标题"]添加展开的内容[/collapse]

原创文章,转载请注明: 转载自荣耀博客
本文链接地址: WP文章添加展开/收缩

关于 荣耀博客

好记性,不如烂笔头。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

验证码 * 验证码已过期

');})();