即插即用：JS 点击“显示全部”、点击隐藏/折叠部分区域文字 - 特效代码_js/jQuery

资料来源：网络整理时间：2023/3/4 0:56:22 共计：3588 浏览

今天修改一个zblog模板的时候，用到了默认隐藏部分区域文字，点击会显示全部，不需要使用jQuery支持，即插即用的一段代码！

图1特效代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<style>
#content,#intro{
 font: 13px/25px;
 width: 200px;
 height: 50px;
 background: #eee;
 padding: 10px;
 border: 4px #ccc double;
    border-bottom:0;
 overflow: hidden;
}
#content{ height:70px;}
#intro {
 color: #036;
 font:12px;
        border: 4px #ccc double;
        border-top:0;
        
}
#key{color:#900;float:right}
hr{height:1px;border:1px #ccc dotted}
</style>
<script>
function shoppingcat(){
    var id = document.getElementById("content");
 var key = document.getElementById("key").innerText;
 if(key==="关闭"){
  id.style.height=70+"px";
  document.getElementById("key").innerText="展开";
 }else{
     id.style.height=500+"px";
  document.getElementById("key").innerText="关闭";
 }
}
</script>
<div id="content"> 
孤雁儿
<br><br>
世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。<br><br>
藤床纸帐朝眠起，<br> 
说不尽、无佳思。<br>
沈香烟断玉炉寒，<br>
伴我情怀如水。<br>
笛声三弄，<br>
梅心惊破，<br>
多少春情意。<br><br>
小风疏雨萧萧地，<br>
又催下、千行泪。<br>
吹箫人去玉楼空，<br> 
肠断与谁同倚？
一枝折得，<br>
人间天上，<br>
没个人堪寄。
</div>
<div id="intro" ><hr>作者：李清照<span id="key" onclick="shoppingcat();">展开</span><br>来源
：中国诗辞网</div>
</body>
</html>

图2：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 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 class="intro">

 作者：李清照

 <span class="key" onclick="fn(this,1)">折叠</span>

</div>

</li>

<li>

<div class="main" id="main2">

 <h3>孤雁儿</h3>

 <p class="mainf">世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。</p>

 <p>藤床纸帐朝眠起，

 <br />说不尽、无佳思。

 <br />沈香烟断玉炉寒，

 <br />伴我情怀如水。

 <br />笛声三弄，

 <br />梅心惊破，

 <br />多少春情意。</p>

 <p>小风疏雨萧萧地，

 <br />又催下、千行泪。

 <br />吹箫人去玉楼空，

 <br />肠断与谁同倚？

 <br />一枝折得，

 <br />人间天上，

 <br />没个人堪寄。</p>

</div>

<div class="intro">

 作者：李清照

 <span class="key" onclick="fn(this,2)">展开</span>

</div>

</li>

</ul>

<script type="text/javascript">

var h = new Array(0,380,25,25,25);

var tf = new Array(false,true,false,false,false);

var minheight = 25;

var maxheight = 380;

function fn(likey,tag){

 if (tf[tag]){

  if (h[tag]>=minheight){

   document.getElementById("main"+tag).style.height = h[tag] + "px";

   setTimeout(function(){fn(likey,tag)},1);

   h[tag] -= 10;

  } else {

   likey.innerHTML = "展开";

   tf[tag] = !tf[tag];

   h[tag] += 10;

  }

 } else {

  if (h[tag]<=maxheight){

   document.getElementById("main"+tag).style.height = h[tag] + "px";

   setTimeout(function(){fn(likey,tag)},1);

   h[tag] += 10;

  } else {

   likey.innerHTML = "折叠";

   tf[tag] = !tf[tag];

   h[tag] -= 10;

  }

 }

}

</script>

</body>

</html>

虽然这个即插即用的点击显示全部，点击隐藏比较好用，但还不是最佳方案，只是一个不需要jQuery支持的代码而已，稍后会分享更多以及带更多效果的点击显示隐藏特效代码！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：案例：jQuery文本段落展开和折叠效果/点击查看更多、点击隐藏_js/jQuery | ·下一条：position:absolute(表示绝对定位)_CSS学习

即插即用：JS 点击“显示全部”、点击隐藏/折叠部分区域文字 - 特效代码_js/jQuery

即插即用：JS 点击“显示全部”、点击隐藏/折叠部分区域文字 - 特效代码_js/jQuery

图1特效代码：

图2：Js点击展开文字 再次点击隐藏（折叠）文字代码：

图2：Js点击展开文字再次点击隐藏（折叠）文字代码：