javascript实现一段文字展开、收起（默认展开）

最新推荐文章于 2025-05-19 08:59:54 发布

erdouzhang

最新推荐文章于 2025-05-19 08:59:54 发布

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js html+css

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/71106977

js 同时被 2 个专栏收录

98 篇文章

订阅专栏

html+css

25 篇文章

订阅专栏

该博客介绍了如何使用JavaScript实现文字的展开和收起功能，默认状态下文字为展开状态。提供了一个在线演示链接，以及HTML、CSS和JavaScript的相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇已经介绍文字默认收起，这篇介绍javascript实现一段文字展开、收起（默认展开）

在线演示

这里写图片描述

html：

<div id="div1">
      2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。
     <a href="javascript:;"><<收起</a>
</div>

css：

<style type="text/css">
    #div1 {width: 600px; background: lightblue; margin: 0 auto;line-height: 26px;}
    a {text-decoration: none;color: red;}
</style>

javascript：

<script>
      var oDiv=document.getElementById('div1');//获取文字的盒子
      var oA=oDiv.getElementsByTagName('a');//获取 a 标签
      var onOff=true;
      var old='';
      oA[0].onclick=function move(){ //a 链接点击后执行 move 函数
          if(onOff){  //判断
              onOff=false;
              old=oDiv.innerHTML;
              oDiv.innerHTML=oDiv.innerHTML.substring(0,65)+'...<a href="javascript:;"> >>展开 </a>';//默认显示65个字符，字符末尾添加 “...>>展开”
              oA=oDiv.getElementsByTagName('a');
              oA[0].onclick=move;
          }else{
              onOff=true;
              oDiv.innerHTML=old;
              oA=oDiv.getElementsByTagName('a');
              oA[0].onclick=move;
          }
      }
</script>