专栏首页Youngxj给你的博客文章加入”展开/收缩功能‘’

给你的博客文章加入”展开/收缩功能‘’

1.在header.php中添加下面的代码,或者也可以单独写进一个js文件中然后在header.php中引入也可以。我是引入的。

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

2.在function.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');

3.可以优化一下代码,因为默认是靠左的,不好看,我们让他往中间一点显示,具体的距离可以自行调整。当然这一步忽略也是可以的。

在style.css中添加以下代码:

.xControl {
padding-left: 32px;
}

教程结束,本教程转自风神博客

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 在线可视化编辑源码

    Youngxj
  • bootstrap简洁居中毛玻璃登录源码

    Youngxj
  • tooltip(title美化)教程——jquery的特效

    Youngxj
  • css3详解:48 linear gradient

    贵哥的编程之路
  • Larave-vue-crud-laravel-和vue-增删改查

    看到successfully代表laravel安装成功,如果没有成功请换淘宝镜像重写安装.

    胡哥有话说
  • Vue.js学习笔记(2)

    程序员不务正业
  • day49_BOS项目_01

    其余步骤参考如下链接: https://www.cnblogs.com/chenmingjun/p/9513143.html#_label0 右键项目 -->...

    黑泽君
  • 一键换肤的简单实现

    以前看到一键换肤的效果很炫酷,其实想一想,实现很简单,于是乎也写一个吧。 上代码: oneBtnChangeSkin.html ( 引入bootstrap.mi...

    lonelydawn
  • 深入解析 CSS 选择器

    CSS 选择器对 HTML 页面中的元素实现一对一,一对多或者多对一的控制,从而给指定元素添加样式。同时还要考虑一个元素被赋予多个样式时如何生效的问题,这个就和...

    政采云前端团队
  • 实现H5中Skeleton Screen骨架屏预加载动态效果

    现在很多web和客户端都已经放弃了以前的那种菊花的加载方式,转而使用Skeleton Screen Loading,比如Facebook、国内的淘宝等都使用了骨...

    程fay

扫码关注云+社区

领取腾讯云代金券