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

今天修改一个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支持的代码而已，稍后会分享更多以及带更多效果的点击显示 隐藏特效代码！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！