方法:
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.下面就可以在文章中通过插入短代码
[collapse title=“标题”]需点击展开的内容[/collapse]
照例在文本编辑器加入按钮
请登录以参与评论
现在登录