我們是不是看到有一些網(wǎng)站文章較長(zhǎng)，可以用隱藏收縮的方法展現(xiàn)提高體驗(yàn)。如果用戶希望閱讀更多可以點(diǎn)擊展開。有些WordPress主題是自帶的，但是有些沒有自帶我們可以自己設(shè)置，具體如何設(shè)置呢？這里麥子整理幾個(gè)方法提供給大家選擇參考使用。

第一、JS代碼部分

jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});

根據(jù)需要我們可以將JS代碼放到JS文件中，也可以單獨(dú)做一個(gè)JS文件后面引用到HEAD里。

第二、功能代碼

/* 展開和收縮功能 */
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');

這樣，我們可以將代碼加入functions.php中。

第三、如何實(shí)現(xiàn)功能

[collapse title="標(biāo)題"]需點(diǎn)擊展開的內(nèi)容[/collapse]

這樣，我們可以將需要隱藏和展現(xiàn)的內(nèi)容丟到對(duì)應(yīng)的標(biāo)簽里。