你在这里


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

James Qi 2016年10月11日 - 11:20 发布

  在页面内容很多、显示太长的情况下,除了分页显示以外,也可以采取折叠的方式,在网上搜了一些资料,一般都是采取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>

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

第一块(默认展开)标题
  • 第一块 第一行
  • 第一块 第二行
  • 第一块 第三行
  • 第一块 第四行
  • 第一块 第五行
第二块(默认折叠)标题

  还可以增加更多块。

自由标签:

添加新评论

Plain text

  • 不允许HTML标记。
  • 自动将网址与电子邮件地址转变为链接。
  • 自动断行和分段。
验证码
本问题用于测试您是否为人类访问者,避免自动垃圾发贴。
图形验证
键入显示在图片中的字符