用JavaScript和CSS实现页面部分内容折叠显示

　　在页面内容很多、显示太长的情况下，除了分页显示以外，也可以采取折叠的方式，在网上搜了一些资料，一般都是采取JavaScript加CSS的方式来实现的，不过有些示范过于简单，有些效果过于复杂，要适合我们自己还得自己改改，经过调试基本上实现了我们需要的效果，记录如下。

　　在页面head或者body部分先加入下面的JavaScript代码：

<script type='text/javascript'>
  function isHidden(oDiv) {
    var vDiv = document.getElementById(oDiv);//div id用于折叠主体
    vDiv.style.display = (vDiv.style.display == 'none')?'block':'none';//反转
    var oDiv1 = oDiv + '1';
    var vDiv1 = document.getElementById(oDiv1);//div id1用于折叠状态显示展开的+号
    vDiv1.style.display = (vDiv1.style.display == 'none')?'block':'none';//反转
    var oDiv2 = oDiv + '2';
    var vDiv2 = document.getElementById(oDiv2);//div id2用于展开状态显示折叠的-号
    vDiv2.style.display = (vDiv2.style.display == 'none')?'block':'none';//反转
  }
</script>

　　再在需要折叠的区域设置div，可以默认为折叠或者展开状态：

<fieldset>
  <legend style="cursor:hand" onclick="isHidden('div_first_part')">
    第一块（默认展开）标题
    <span style='float:right; display:none;' id='div_first_part1'>+&nbsp</span>
    <span style='float:right; display:block;' id='div_first_part2'>-&nbsp</span>
  </legend>
  <div style='display:block;' id='div_first_part'>
    <ul>
      <li>第一块 第一行</li>
      <li>第一块 第二行</li>
      <li>第一块 第三行</li>
      <li>第一块 第四行</li>
      <li>第一块 第五行</li>
    </ul>
  </div>
</fieldset>

<fieldset>
  <legend style="cursor:hand" onclick="isHidden('div_second_part')">
    第二块（默认折叠）标题
    <span style='float:right; display:block;' id='div_second_part1'>+&nbsp</span>
    <span style='float:right; display:none;' id='div_second_part2'>-&nbsp</span>
  </legend>
  <div style='display:none;' id='div_second_part'>
    <ul>
      <li>第二块 第一行</li>
      <li>第二块 第二行</li>
      <li>第二块 第三行</li>
      <li>第二块 第四行</li>
      <li>第二块 第五行</li>
    </ul>
  </div>
</fieldset>

　　效果如下，其中第一块是默认展开状态，第二块是默认折叠状态，点击每一块的标题行可以切换状态：

function isHidden(oDiv) { var vDiv = document.getElementById(oDiv);//div id用于折叠主体 vDiv.style.display = (vDiv.style.display == 'none')?'block':'none';//反转 var oDiv1 = oDiv + '1'; var vDiv1 = document.getElementById(oDiv1);//div id1用于折叠状态显示展开的+号 vDiv1.style.display = (vDiv1.style.display == 'none')?'block':'none';//反转 var oDiv2 = oDiv + '2'; var vDiv2 = document.getElementById(oDiv2);//div id2用于展开状态显示折叠的-号 vDiv2.style.display = (vDiv2.style.display == 'none')?'block':'none';//反转 }

第一块（默认展开）标题 +&nbsp -&nbsp

• 第一块 第一行
• 第一块 第二行
• 第一块 第三行
• 第一块 第四行
• 第一块 第五行

第二块（默认折叠）标题 +&nbsp -&nbsp

• 第二块 第一行
• 第二块 第二行
• 第二块 第三行
• 第二块 第四行
• 第二块 第五行

　　还可以增加更多块。

评论

您的名字

评论

关于文本格式

Plain text

• 不允许使用HTML标签。
• 网页和电子邮件地址自动转换为链接。
• 自动断行和分段。

验证码

此问题用于测试您是否是人类访问者并防止自动提交垃圾信息。