如何创建生物信息Descipton阅读更多Jump Link(WP)

时间:2012-12-05 01:13:11

标签: jquery

如何创建生物信息描述阅读更多(单击以在同一页面上完整阅读)当字符超过320个字符时。

以下是This Page上的生物信息说明。

<p><?php echo $curauth->description; ?></p>

1 个答案:

答案 0 :(得分:0)

以下是一个工作示例:http://jsfiddle.net/S8Cxr/

HTML:

<p id="bio">I am a sahm (stay at home mom) mom of 8, passionately interested in...well..my interests! I am restoring a 100 year old farm house, homeschooling the six kids still at home, raising Nigerian Dwarf Dairy goats, and trying to change our lives and those around us by the decisions and choices we make daily. I love reading, spinning fiber, sewing, cooking, writing, painting, crafting, antiquing...and just about anything shiny can grab my interest for a bit..Well maybe I am not that bad.</p>​

JavaScript的:

$(document).ready(function() {
    var bio = $('#bio');
    var text = bio.text();

    if (text.length > 320) {
        bio.html(text.slice(0, 320) + '<span class="more">... (<a class="expand" href="#">more</a>)</span><span class="hidden">' + text.slice(320) + '</span>');

        $('.expand').on('click', function(event) {
            $(event.target)
                .closest('p')
                .find('.hidden')
                    .removeClass('hidden')
                    .end()            
                .find('.more')
                    .remove();
        });
    }    
});​