ホームページ > 記事 > ウェブフロントエンド > jquery は、段落 text_jquery の展開と折りたたみの効果を制御するために、クリックして詳細コンテンツを表示する機能を実装します。
jquery は、段落 text_jquery の展開と折りたたみの効果を制御するために、クリックして詳細コンテンツを表示する機能を実装します。
- 不言オリジナル
- 2018-05-24 15:53:2730208ブラウズ
この記事の例では、段落テキストの展開と折りたたみの効果を制御するために、クリックして詳細なコンテンツを表示する jquery の実装について説明します。皆さんの参考に共有してください。詳細は次のとおりです。
ここでは、テキストの展開と折りたたみ効果を実装するために、テキストをクリックした後、テキストの内容が完全に表示されるように制御します。をもう一度クリックすると、コンテンツを折りたたむことができます。つまり、コンテンツの一部が非表示になります。 「クリックして詳細を表示」機能は、多くの大規模 Web サイトで使用されています。たとえば、一部の映画の紹介や製品の紹介は、ページのレイアウト効果を考慮してデフォルトで非表示になっている場合があります。
操作の効果を次の図に示します。
具体的なコードは次のとおりです。
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery文本段落展开和折叠效果</title>
<style>
html,body,p,h2,p{margin: 0;padding: 0;}
html{font: 1em Arial, Helvetica, sans-serif;color: #444;}
a{color: #0087f1;}
p{margin-bottom: 5px;}
#container{margin: 0 auto;width: 600px;}
#container h2{font-size: 20px;color: #0087f1;}
#wrap{position: relative;padding: 10px;overflow: hidden;}
#gradient{width: 100%;height: 35px;background: url() repeat-x;position: absolute;bottom: 0;left: 0;}
#read-more{padding: 5px;border-top: 4px double #ddd;background: #fff;color: #333;}
#read-more a{padding-right: 22px;background: url() no-repeat 100% 50%;font-weight: bold;text-decoration: none;}
#read-more a: hover{color: #000;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js?7.1.34"></script>
<script type="text/javascript">
$(function(){
var slideHeight = 75; // px
var defHeight = $('#wrap').height();
if(defHeight >= slideHeight){
$('#wrap').css('height' , slideHeight + 'px');
$('#read-more').append('<a href="#">点击查看更多。。</a>');
$('#read-more a').click(function(){
var curHeight = $('#wrap').height();
if(curHeight == slideHeight){
$('#wrap').animate({
height: defHeight
}, "normal");
$('#read-more a').html('点击隐藏');
$('#gradient').fadeOut();
}else{
$('#wrap').animate({
height: slideHeight
}, "normal");
$('#read-more a').html('点击查看更多。。');
$('#gradient').fadeIn();
}
return false;
});
}
});
</script>
</head>
<body>
<p id="container">
<h1>jQuery 控制段落文字展开折叠，点击查看更多的功能</h1>
<h2>About Billabong</h2>
<p id="wrap">
<p>
<p>Gordon developed his own stitching technique, which made the garments more durable, cost effective and less labor intensive. He employed machinists, moved the operation into a factory, set up a distribution network and sponsored a team of renowned Australian surfers. The business thrived.</p>
<p>Since those beginnings, Billabong has expanded its product range to include boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.</p>
</p>
<p id="gradient"></p>
</p>
<p id="read-more"></p>
</p>
</body>
</html>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。