实现WordPress文章展开/收缩的效果
发布时间：2025-10-23 09:44:56 本站作者 【 字体：大 中 小 】 浏览：127 次
1、修改footer.php文件
加入到body之前
<script>jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});</script>2、修改functions.php文件
加入到主题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"><span class="xbtn02">展开/收缩</span></a>
<div style="clear: both;"></div>
</div>
<div class="xContent" style="display: none;">'.$content.'</div>
</div>';
}
add_shortcode('collapse', 'xcollapse');3、代码使用：
{collapse title="标题"}需点击展开的内容{/collapse}
将上述代码中的{}分别替换为[]
补刀：CSS美化一下吧
/* 展开收缩*/.xControl {
background: #f6f6f6;
}
.xTitle {
color: #333;
}
.xbtn02{
color: #428bca;
text-decoration: underline;
}在编辑文章的时候快速添加该按钮 :
//添加展开/收缩快捷标签按钮
function appthemes_add_collapse() {
?><script type="text/javascript">// <![CDATA[
QTags.addButton( 'collapse', '展开/收缩按钮', '{collapse title="说明文字"}','{/collapse}' );// ]]>
</script><?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );将上述代码中的{}分别替换为[]
将上述代码添加到主题functions.php文件中，然后在编辑文章的时候切换到文本模式，就可以看到该按钮.
按钮使用方法：先单击一次，然后输入你想要收缩的内容，再单击一次按钮，然后替换替换其中的说明文字。
热门推荐
最新发布
白菜豆腐的家常做法
用料主料 白菜800克 豆腐400克调料 食盐1.5茶匙 鸡精1/2茶 匙姜1片 蒜3瓣 植物油3汤匙 细香葱1根 水少许白菜豆腐的做法1.白菜切段，豆腐切块。2.豆腐和白菜各下水焯一下，捞出沥干；锅中倒植物油烧热，放入姜蒜葱，炒香。3.放入豆腐略煎一下，加水(或高汤)小炖一会儿；放入白菜翻炒几下，最后调...
菠菜炒鸡胸肉的做法
材料菠菜适量，鸡胸肉适量，盐适量，鸡精适量，五香粉适量，生抽适量，老抽适量，淀粉适量，料酒适量，姜适量，蒜适量，花椒适量。具体方法1.准备适量鸡胸肉，洗净后切成条，放入适量的姜丝，再放入适量盐，鸡精，五香粉，淀粉，搅拌均匀，腌制15分钟。2.炒锅中放入适量油，油热后放入适量蒜片和花椒爆...
家常香菇菜心的做法
用料主料香菇 250克油菜苔 250克调料色拉油 适量食盐 适量蚝油 适量淀粉 适量白糖 少许香菇菜心的做法1. 菜心清洗干净。2. 水中加少许盐和油，烧开焯烫菜心。这样焯过的蔬菜能保持很好的色泽，其他蔬菜也适用。3. 菜心捞出过凉。4. 挑选大小基本一致，表面光洁...
家常芹菜炒土豆片的做法
用料主料芹菜 200g马铃薯丁(脱水) 2个调料食盐 适量味精 适量葱 适量花椒 适量生抽 适量调和油 适量柿子椒 适量芹菜炒土豆片的做法1.芹菜洗净，切小段。2.土豆切片，用冷水浸泡，备用。3.开水焯一下，放入冷水中。4.锅中放油，加葱、花椒炒香放入土豆...
