文章内容的展开/收缩功能

:meng: 代码全靠抄 大佬勿喷

0. 加载jQuery库,如果原来就加载了,可免去此步骤。
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
1. 引入功能(functions.php)
function xcollapse($atts,$content=null,$code=""){
    extract(shortcode_atts(array("title"=>'标题内容'),$atts));
    $return = '<div class="xControl"><div class="xHeading"><div class="xIcon"><i class="fa fa-plus"></i></div><h5>';
    $return .= $title;
    $return .= '</h5></div><div class="xContent"><div class="inner">';
    $return .= $content;
    $return .= '</div></div></div>';
    return $return;
}
add_shortcode('collapse','xcollapse');
2. 引入JS
(function() {
	$(function(){
		$('.xHeading').on('click', function(event){
			var $this = $(this);
			$this.closest('.xControl').find('.xContent').slideToggle(300);
			if ($this.closest('.xControl').hasClass('active')) {
				$this.closest('.xControl').removeClass('active');
			} else {
				$this.closest('.xControl').addClass('active');
			}
			event.preventDefault();
		});
	});
}());
3. 引入CSS样式
.xControl{position:relative;margin-bottom:15px;background:#f6f6f6}
.xHeading{position:relative;cursor:pointer;padding:10px 30px 10px 10px}
.xHeading h5{margin-bottom:0;font-size:16px}
.xHeading .xIcon{position:absolute;top:1px;right:13px;font-size:20px}
.xControl.active .xIcon{-webkit-transition:.3s;transition:.3s;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.xContent{display:none;border-top:1px solid #e6e6e6}
.xContent .inner{padding:5px 15px;color:#333}
4. 食用方法
把下面的大括号改成[]
{collapse title="标题内容"}{/collapse}
点赞
  1. 北海说道:
    QQbrowser Windows 7

    哇 大佬一日一水 小弟佩服佩服!

    1. 小白-白说道:
      Firefox Windows 8.1

      你够了

      1. 北海说道:
        QQbrowser Windows 7

        哈哈哈!你也戴帽子了?圣诞帽子?

        1. 小白-白说道:
          Google Chrome Android 7.0

          :huaji5: 常规套路

  2. 到咩说道:
    Google Chrome Android 6.0

    非常美丽

发表评论

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