• 关于展开和收缩利是在文中插入解释所用 ,添加代码后采用 [collapse title=”标题”]需点击展开的内容[/collapse] 插入对应文章内。
  • 对于more标签用于主页的文章缩减,文中插入标签即可。

所以,因为弄混了这两个的概念导致用了两个多小时才达到想要的目标。本来一个more标签就搞定结果弯弯绕绕这么久。

1.在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 '
"margin: 0.5em 0;">

        
class="xControl">

            class="xTitle">'.$title.'

            "javascript:void(0)" class="collapseButton xButton">展开/收缩

            
"clear: both;">

        

        
class="xContent" style="display: none;">'.$content.'

    
';
}
add_shortcode('collapse', 'xcollapse');

3.在style.css中添加以下代码(优化)

.xControl {
    padding-left: 32px;
}

4.在文章中通过插入短代码

【collapse title=”标题”]需点击展开的内容[/collapse】

分类: 学习

0 条评论

发表评论

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

zh_CNChinese
zh_CNChinese