jQueryで長文部分表示を実装 code_jquery-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQueryで長文部分表示を実装 code_jquery

May 16, 2016 pm 05:33 PM

jquery

Web ページには小さな領域しかありませんが、説明テキストが非常に長くなります。次のスクリプトは、長いテキストの部分表示を実装します。
ユーザーがクリックして展開するとテキストが展開され、閉じるとテキストが閉じます。

本来は jQuery の組み込み toggle() を使用して記述できましたが、実際に実行すると toggle が機能しなかったので、クリックフラグを使用して実行しました

コードをコピーコードは次のとおりです:

 
<スクリプト言語="javascript" src="jquery.js"></script> 
<スクリプト言語="javascript"> 
var cur_status = "less" ; 
$.extend({ 
show_more_init:function(){ 
//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}, { 期間 : "遅い" }); 
$(this).html("収集"); 
cur_status = "詳細"; 
$(".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(); 
}); 
</script> ; 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ; タイトル>テスト</タイトル> 
#limittext{ 
位置:相対; ccc ; 
カラー:黒; 
.switch{ 
フォントサイズ:12px; 
フォントファミリー; : バーダナ; 
フォントの重さ: 800; 
下: 0; 
/*背景:url(more-bg.png) - x ボトム;*/ 
高さ:40px; 
行の高さ:80px;
</style> 
</head> 
<body> 
<div id="limittext" > 
<div class="content" style=" padding-bottom:15px;"> 
This is a very long paragraph, this is a very long paragraph, this is a very long paragraph, this is a very long paragraph, this is a very long paragraph Text, this is a long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, This is a long paragraph, this is a very long paragraph, this is a very long paragraph, this is a very long paragraph, this is a very long paragraph, this is a very long paragraph, this is It’s a long paragraph, it’s a long paragraph, it’s a long paragraph, it’s a long paragraph, it’s a long paragraph, it’s a long paragraph, it’s a long paragraph A paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph Text, this is a long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, This is a long paragraph, this is a very long paragraph, this is a very long paragraph, this is a very long paragraph, this is a very long paragraph, this is a very long paragraph, this is It’s a long paragraph, it’s a long paragraph, it’s a long paragraph, it’s a long paragraph, it’s a long paragraph, it’s a long paragraph, it’s a long paragraph A paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph Text, this is a long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, This is a long paragraph, this is a very long paragraph, this is a very long paragraph, this is a very long paragraph, this is a very long paragraph, this is a very long paragraph, this is It’s a long paragraph, it’s a long paragraph, it’s a long paragraph, it’s a long paragraph, it’s a long paragraph, it’s a long paragraph, it’s a long paragraph A paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph Text, this is a long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, This is a long paragraph, this is a very long paragraph, this is a very long paragraph, this is a very long paragraph, this is a very long paragraph, this is a very long paragraph, this is It’s a long paragraph, it’s a long paragraph, it’s a long paragraph, it’s a long paragraph, it’s a long paragraph, it’s a long paragraph, it’s a long paragraph A paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text, this is a very long paragraph Text, this is a long paragraph of text, this is a very long paragraph of text, this is a very long paragraph of text
</div> 
<div class="switch">Expand</ div> 
</div> 
</body> 
</html> 