jQueryで長文部分表示を実装 code_html/css_WEB-ITnose

ウェブページには小さな領域しかありませんが、説明文が非常に長いので、同じようなニーズを持つ友人の参考になれば幸いです。 Web ページには小さな領域しかありませんが、説明テキストは非常に長くなります。次のスクリプトは、長いテキストの部分表示を実装します。

ユーザーがクリックして展開するとテキストが展開され、閉じるとテキストが閉じます。 本来は jQuery に付属の toggle() を使って書くことができましたが、実際に作ってみると toggle が機能しなかったので、 click + flag を使って実行しました

var cur_status = "less"; //alert("show_more_init!");

var charNumbers=$(".content").html().length;//総単語数

var limit=100;//表示単語数

if( charNumbers>limit)

{

var orgText=$(".content").html();//元のテキスト

var orgHeight=$(".content").height();// 元の高さ

var showText=orgText.substring(0,limit);//最終的に表示されるテキスト

$(".content").html(showText);

var contentHeight=$(".content").height(); / /コンテンツをインターセプトした後の高さ

$(".switch").click(

function() {

if(cur_status == "less"){

$(".content").height(contentHeight ) .html(orgText).animate({ height:orgHeight}, { period: "slow" });

$(this).html("合合"); else {

$(".content").height(orgHeight).html(showText).animate({ height:contentHeight}, {duration: "fast" });

$(this).html("expand " );

cur_status = "less";

}

);

}

else

{

$(".switch").hide(); }

}

});

$(document).ready(function(){

$.show_more_init();

});

GT ;

test

フォントサイズ:12px;

カーソル:ポインター;

位置:絶対; ;

bottom:0;

/*background:url(more-bg.png) 繰り返し-x 底;*/

line-height:80px; }

これは非常に長いテキストです、これは非常に長いテキストです、これは非常に長いテキストです、これは非常に長いテキストです、これは非常に長いテキストです、これは非常に長いテキストです、これは非常に長い段落です。とても長い段落です とても長い段落です とても長い段落です これはとても長い段落です非常に長い段落、これは非常に長い段落、これは非常に長い段落、これは非常に長い段落、これは非常に長い 文章の段落、これは非常に長い文章の段落、これは非常に長い段落テキストの、これは非常に長いテキストの段落です、これは非常に長いテキストの段落です、これは非常に長いテキストの段落です、これは非常に長いテキストの段落です、これは非常に長いテキストの段落です、これは非常に長い文章の段落、これは非常に長い文章の段落、これは非常に長い文章の段落、これは非常に長い文章の段落、これは非常に長い文章の段落、これは非常に長い段落です、それは非常に長い段落です、それは非常に長い段落です、それは非常に長い段落です、それは非常に長い段落です、それは非常に長い段落です、それは非常に長い段落です 長い段落、これは非常に長い段落です、これは非常に長い段落です長い段落、これは非常に長い段落、これは非常に長い段落、これは非常に長い段落、これは非常に長い 文章の段落、これは非常に長い文章の段落、これは非常に長い段落テキスト、これは非常に長いテキストの段落です、これは非常に長いテキストの段落です、これは非常に長いテキストの段落です、これは非常に長いテキストの段落です、これは非常に長いテキストの段落です、これは非常に長い文章の段落、これは非常に長い文章の段落、これは非常に長い文章の段落、これは非常に長い文章の段落、これは非常に長い文章の段落、これは非常に長い段落です、それは非常に長い段落、非常に長い段落、非常に長い段落、非常に長い段落、非常に長い段落、非常に長い段落 長い段落、これは非常に長い段落、これは非常に長い段落、これは非常に長い段落です、これは非常に長い段落、これは非常に長い段落、これは非常に長いです 文章の段落、これは非常に長い文章の段落、これは非常に長い文章の段落、これは非常に長い文章の段落です、これは非常に長い文章の段落です、これは非常に長い文章の段落です、これは非常に長い文章の段落です、これは非常に長い文章の段落です、これは非常に長い文章です長い段落のテキスト、これは非常に長い段落のテキスト、これは非常に長い段落のテキスト、これは非常に長い段落のテキスト、これは非常に長い段落です、これは非常に長い段落です。非常に長い段落、非常に長い段落、非常に長い段落、非常に長い段落、非常に長い段落、非常に長い段落 長い段落、これは非常に長い段落、これは非常に長い段落、これは非常に長い段落です、これは非常に長い段落です、これは非常に長い段落です、これは非常に長いテキストの段落です、これは非常に長いテキストの段落です、これは非常に長いテキストの段落です、これは非常に長い文章の段落です、これは非常に長い文章の段落です、これは非常に長い文章の段落です、これは非常に長い文章の段落です、これは非常に長い文章の段落です、これは非常に長い文章ですテキストの段落、これは非常に長いテキストの段落、これは非常に長いテキストの段落、これは非常に長いテキストの段落、これは非常に長いテキストの段落、これは長いテキストの段落です、これは長い段落のテキスト

Expand