文章页添加展开收缩功能

听说原文来自陌小雨,但他的网页复制不过来文字,虽然有提示复制成功的窗口,但是是假效果。从另外的网站中获得该种方法。
效果如本篇文章。实现步骤:
[collapse title="一、在主题文件夹目录内的footer.php文件内/body标签前添加如下代码"]

<script>jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});</script>

[/collapse]
[collapse title="二、在主题文件夹目录内的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');

[/collapse]
[collapse title="三、在文章需要折叠的地方添加如下代码"]

[collapse title="标题"]需点击展开的内容【/collapse]

[/collapse]

另:编辑文章时快速添加折叠块:
[collapse title="在主题文件夹目录内的functions.php文件末尾添加如下代码"]

//添加展开/收缩快捷标签按钮 tongzan.com剽窃
function appthemes_add_collapse() {if (wp_script_is('quicktags')){
?><script type="text/javascript">// <![CDATA[ 
QTags.addButton( 'collapse', '展开/收缩按钮', 【collapse title="tongzan.com"]','【/collapse]' );
// ]]></script><?php }} add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

[/collapse]
即可在编辑文章的文本界面看到展开/收缩按钮。

将上述部分代码中的【改成[

一衰人走在毁人不倦的不归路途。父不父,夫不夫,子不子,师不师,我之谓也。

传说看完文章评个论是高尚品德

随机一篇看看手气咯
狠狠的抽打博主 支付宝微信打赏