由于该版本样式有些老旧了，文字咖特意写一篇目前来讲比较满意的展开收缩功能二次美化版，详细情况
最近博主还算是比较空闲，无聊的时候，静下来，折腾一下 DUX 主题，之前博主的博客就已经实现在文章里面实现部分内容收缩展开的功能，当然代码用的是 蝈蝈要安静 的，这里非常感谢 蝈蝈要安静 大佬，无私的把这些代码，免费的分享出来！
但是，博主总觉得这个样式不好看，并且在晚上搜了一圈，发现那些代码都是直接搬运的 蝈蝈要安静 的代码，一脸无奈的我，只能又一次开启自己的折腾之路。
代码很简单，主要还是仿照 蝈蝈 大神的代码，自己稍微改了下样式，所以在这里分享给大家！
1. 添加JS代码
这个代码直接用的 蝈蝈 大神的，博主没有修改，将以下代码添加到你主题 header.php 文件的 <body> 标签前面
// 添加文章页展开收缩JS效果 <script type="text/javascript"> jQuery(document).ready( function(jQuery){ jQuery('.collapseButton').click( function(){ jQuery(this).parent().parent().find('.xContent').slideToggle('slow'); } ); } ); </script>
2. 添加代码至主题 functions.php 文件
这里的代码，博主稍微改动了一下，感觉比之前的更好看，并且更具人性化一些！
// 文章页添加展开收缩效果 function xcollapse($atts, $content = null){ extract(shortcode_atts(array("title"=>""),$atts)); return '<div style="margin: 0.5em 0;"> <div class="xControl"> <a href="javascript:void(0)" class="collapseButton xButton"><span class="xTitle">'.$title.'</span></a> <div style="clear: both;"></div> </div> <div class="xContent" style="display: none;">'.$content.'</div> </div>'; } add_shortcode('collapse', 'xcollapse'); //添加展开/收缩快捷标签按钮 function appthemes_add_collapse() { ?> <script type="text/javascript"> if ( typeof QTags != 'undefined' ) { QTags.addButton( 'collapse', '展开/收缩按钮', '【collapse title="点击展开 查看更多"]','【/collapse]' ); } </script> <?php } add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );
注意：把上面代码的【 都改成 [ ！
添加完以上代码，在后台点击文章编辑的 文本 菜单，便会出现一个 展开/收缩按钮 的一个快捷按钮！
3. 添加 css 样式
将下面的代码添加到 main.css 文件中，即可显示你想要的文章内容 收缩展开 样式了！
.xControl { font-size: 15px; font-weight: bold; padding: 5px 0; background-color: #f5f5f5; border-bottom: 4px solid #d0d0d0; transition: all 0.3s linear; text-align: center; border-radius: 0 0 5% 5%; } .xControl a{ text-decoration: none; display: block; }
教程结束！
本期内容就到这里啦～以上内容均可在 方包博客「http://fang1688.cn」 网站直接搜索名称访问哦。欢迎感兴趣的小伙伴试试，如果本文对您有帮助，也请帮忙点个 赞 + 在看 啦！❤️
欢迎大家加入方包的「优派编程」学习圈子，和多名小伙伴们一起交流学习，向方包 1 对 1 提问、跟着方包做项目、领取大量编程资源等。Q群「891029429」欢迎想一起学习进步的小伙伴~
另外方包最近开发了一款工具类的小程序「方包工具箱」,功能包括：抖音、小红书、快手去水印，天气预报，小说在线免费阅读（内含上万部热门小说），历史今天，生成图片二维码,图片识别文字，ai伪原创文章，数字摇号抽奖,文字转语音MP3功能...
定期分享 it编程干货
⬇️ 点击链接阅读原文直达 方包博客
评论抢沙发