Js點擊展開文字再次點擊隱藏（折疊）文字

Js代碼實現類似的面板的特效，單點“展開”后文字可以全部顯示，這里“展開”文字變成了“隱藏”，點擊“隱藏”后又可將文字重新折疊隱藏起來，只顯示標題或標題，本演示用一首古詩來展現效果，比較貼切，當然你完全可以把本效果用在網頁的任意地方，比如電影簡介、文章摘要等。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>點擊展開文字隱藏文字JS代碼</title><style type="text/css">* {	margin:0; padding:0; border:0;}ul {	list-style-type:none;}li {	margin:10px;	width:200px;	border:4px double #ccc;	background:#eee;}li .main,li .intro {	margin:5px 5px 0 5px;	font-size:12px;}li .main {	height:25px;	overflow:hidden;	line-height:22px;}#main1 {	height:380px;}li h3 {	margin:0 5px 5px;}li p{	margin:8px 0;	font-size:14px;	color:#111;}li .mainf {	line-height:15px;	font-size:12px;	color:#333;}li .intro {	padding:3px 0 0;	color:#036;	line-height:18px;	border-top:1px dotted #366;}li .key {	float:right;	margin-top:-20px;	color:#900;	cursor:pointer;}</style></head><body><ul><li><div   id="ndqoxzb"   class="main" id="main1">	<h3>孤雁兒</h3>	<p class="mainf">世人作梅詞，下筆便俗。予試作一篇，乃知前言不妄耳。</p>	<p>藤床紙帳朝眠起，	<br />說不盡、無佳思。	<br />沈香煙斷玉爐寒，	<br />伴我情懷如水。	<br />笛聲三弄，	<br />梅心驚破，	<br />多少春情意。</p>	<p>小風疏雨蕭蕭地，	<br />又催下、千行淚。	<br />吹簫人去玉樓空，	<br />腸斷與誰同倚？	<br />一枝折得，	<br />人間天上，	<br />沒個人堪寄。</p></div><div   id="htgprpj"   class="intro">	作者：李清照	<span id="fzpnlyh"    class="key" onclick="fn(this,1)">折疊</SPAN>
</div>
</div>
<div   id="vhqgpja"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="pbgpcvt"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1557957.html'>4行一組的文字無縫切換效果</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1557959.html'>JavaScript鼠標移上文字放大文字效果</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="higejlf"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學習交流