jquery - バイオ情報説明を作成する方法続きを読むジャンプリンク（WP）

Question

バイオ情報記述子を作成する方法続きを読む（同じページで完全に読むにはクリックしてください）文字が320文字を超える場合。

以下は、このページの私のバイオ情報の説明です。

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

Answer 1

これが実際の例です: 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();
        });
    }    
});​