前端js和css实现 展开/收起 效果

于 2024-03-26 01:45:20 发布
阅读量675 收藏 28
点赞数 23
文章标签： 前端 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smile_hahahaxixi/article/details/137030743
版权

一、位于文本下方的

在这里插入图片描述
实现代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .outBox {
        width: 300px;
        height: 60px;
      }
      .text {
        word-break: break-all;
        margin-bottom: 0;
      }
      .operateBtn {
        color: rgb(51, 51, 244);
        cursor: pointer;
      }
      .colse {
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        word-break: break-all;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .display {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="outBox">
      <p class="text">
        我是嘻嘻哈哈我是嘻嘻哈哈我是嘻嘻哈哈我是嘻嘻哈哈嘿嘿哇哇
        哇嘻嘻哈哈嗨哇哦哈helloTOMEYESSOWS
      </p>
      <span class="operateBtn">展开</span>
    </div>

    <script>
      // 定义一个函数用来获取指定类名的dom
      function $(className) {
        return document.getElementsByClassName(className)[0];
      }
      // 获取dom
      const outBox = $("outBox");
      const textDom = $("text");
      const operateDom = $("operateBtn");

      // 获取高/外层元素内容高度
      const outBoxH = $("outBox").clientHeight;
      const textH = $("text").clientHeight;

      if (textH > outBoxH) {
        textDom.classList.add("colse");
      } else {
        operateDom.classList.add("display");
      }

      operateDom.onclick = function () {
        if (operateDom.innerText === "展开") {
          textDom.classList.remove("colse");
          operateDom.innerText = "收起";
        } else {
          textDom.classList.add("colse");
          operateDom.innerText = "展开";
        }
      };
    </script>
  </body>
</html>

二、位于右下角的

在这里插入图片描述
实现代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        font-size: 14px;
      }
      .wrap {
       /* 不加这一层的话，下面给 .moreThan3::before加的高度将不生效*/
        display: flex;
      }
      .btn {
        display: none;
        line-height: 1;
        color: blue;
        float: right;
        clear: both;
        cursor: pointer;
      }
      .outBox {
        text-align: justify;
        /* 相當于設置了lihei-height的值為:fontSize*1.5; */
        line-height: 1.5;
        /* 相當于設置了最大高度值為3個行高的高度，也就是三行 */
        /* max-height: 4.5em; */
      }
      .line-clamp3 {
        -webkit-line-clamp: 3;
      }
      .line-clamp-max {
      /* 给一个极限值，就可以显示展开的效果 */
        -webkit-line-clamp: 999;
      }
      .moreThan3 {
        -webkit-box-orient: vertical;
        overflow: hidden;
        display: -webkit-box;
      }
      
      /* 写这个是为了让按钮正确的展示在右下角，且文字承包围样式 */
      .moreThan3::before {
        content: "";
        background-color: red;
        height: 100%;
        margin-bottom: -16px;
        width: 0px;
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="outBox">
        <div class="btn">展開</div>
        哈哈哈哈哈哈哈哈哈哈，叶叶叶叶叶叶哇哈哈余音绕梁咀嚼拉各斯村工骤，同，需要奇葩夺回归冰。
        哈哇哈哈啊哈哈黑猫警长，啊哈哈，啊哈哈黑猫警长长长长迅哥儿哟嘻嘻嘻嘻一只为授信回去哈哈
        哈哈哈我們的亞洲中國今天的北京、深圳、上海、廣州、杭州、南京、天津、重慶濟南哈葉
      </div>
    </div>

    <script>
      // 定義一個方法來獲取dom
      function $(selector) {
        return document.querySelector(selector);
      }

      // 判斷文本內容是否超過3行，即14 * 1.5 * 3 = 63
      const outBoxDom = $(".outBox");
      const btnDom = $(".btn");
      if (outBoxDom.offsetHeight > 63) {
        btnDom.style.display = "block";
        outBoxDom.classList.add("moreThan3");
        outBoxDom.classList.add("line-clamp3");
      } else {
        btnDom.style.display = "none";
      }

      btnDom.addEventListener("click", () => {
        if (btnDom.innerText === "展開") {
          btnDom.innerText = "收起";
          outBoxDom.classList.remove("line-clamp3");
          outBoxDom.classList.add("line-clamp-max");
        } else {
          btnDom.innerText = "展開";
          outBoxDom.classList.remove("line-clamp-max");
          outBoxDom.classList.add("line-clamp3");
        }
      });
    </script>
  </body>
</html>

三、位于右下角——纯CSS实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrapper {
        display: flex;
        margin: 50px auto;
        width: 800px;
        overflow: hidden;
        /*   resize: horizontal; */
        border-radius: 8px;
        padding: 15px;
        box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
      }
      .text {
        font-size: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: justify;
        /* display: flex; */
        /* display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical; */
        position: relative;
        line-height: 1.5;
        max-height: 4.5em;
        transition: 0.3s max-height;
      }
      .text::before {
        content: "";
        height: calc(100% - 26px);
        float: right;
      }
      .text::after {
        content: "";
        width: 999vw;
        height: 999vw;
        position: absolute;
        box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
        margin-left: -100px;
      }
      .btn {
        position: relative;
        float: right;
        clear: both;
        margin-left: 20px;
        font-size: 16px;
        padding: 0 8px;
        background: #3f51b5;
        line-height: 24px;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        /* margin-top: -30px; */
      }
      .btn::after {
        content: "展开";
      }
      .exp {
        display: none;
      }
      .exp:checked + .text {
        max-height: none;
      }
      .exp:checked + .text::after {
        visibility: hidden;
      }
      .exp:checked + .text .btn::before {
        visibility: hidden;
      }
      .exp:checked + .text .btn::after {
        content: "收起";
      }
      .btn::before {
        content: "...";
        position: absolute;
        left: -5px;
        color: #333;
        transform: translateX(-100%);
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <input id="exp1" class="exp" type="checkbox" />
      <div class="text">
        <label class="btn" for="exp1"></label>
        哈哈哈哈哈哈哈哈哈哈，叶叶叶叶叶叶哇哈哈余音绕梁咀嚼拉各斯村工骤，同，需要奇葩夺回归冰。
        哈哇哈哈啊哈哈黑猫警长，啊哈哈，啊哈哈黑猫警长长长长迅哥儿哟嘻嘻嘻嘻一只为授信回去哈哈
        哈哈哈我們的亞洲中國今天的北京、深圳、上海、廣州、杭州、迅哥兒
      </div>
    </div>
  </body>
</html>
smile_hahahaxixi
关注
  • 23
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序实现展开/收起的效果示例
10-17
主要介绍了小程序实现展开/收起的效果示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javaScript实现点击展开和收起的功能
WaterArticle
07-21 6493
javaScript实现点击展开和收起的功能。
js实现段落展开和收起
七七的博客
01-11 685
js实现文字内容展开收起
记录--不定高度展开收起动画 css/js 实现
林恒的博客
06-28 2099
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 不定高度展开收起动画 最近在做需求的时候，遇见了元素高度展开收起的动画需求，一开始是想到了使用 transition: all .3s; 来做动画效果，在固定高度的情况下，transition 动画很好使，满足了需求，但是如果要考虑之后可能还会有更改的情况下，如果每次都是用固定高度来做动画，会显得很繁琐，也很呆，就想到了使用 he...
Javascript实现点击展开和收起的功能(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-05 422
Javascript实现点击展开和收起的功能(附完整源码)
js实现点击按钮控制展开与收起
企业级技术与网站app运营
05-21 1325
【代码】js实现点击按钮控制展开与收起。
使用css和javascript实现纯前端的樱花飘落效果
最新发布
04-17
使用css和javascript实现纯前端的樱花飘落效果 具体展示效果可查看https://blog.csdn.net/shmookpup/article/details/137888214
前端面试题汇总(html/css/js/vue/ts/uniapp/git等)
04-09
涉及知识点： 1、优化（seo优化、渐进增强与优雅降级、性能优化...3、css 必会面试题 4、JavaScript 必会面试题（初级-高级） 5、vue2-vue3 基础知识以及相关面试题 6、typescript 基础知识 7、uniapp 基础 8、网络相关
CSS3 实现侧边栏展开收起动画
09-25
主要介绍了如何使用CSS3 实现侧边栏展开收起动画，并附上了示例代码，非常的详细，推荐给需要的小伙伴。
原生js和css实现3D波浪效果图
02-08
原生js和css实现3D波浪效果图
js实现展开和收起效果
11-30
JavaScript实现展开和收起效果，JS展开，JS收起，JS点击按钮加载。
CSS+JS实现一个DIV层的展开折叠效果
09-01
CSS+JS实现一个DIV层的展开折叠效果,自己总结出来的，两天才解决的问题，分享出来，大家项目学习，交流。欢迎评论、指导
JS实现的简单折叠展开动画效果示例
12-02
本文实例讲述了JS实现的简单折叠展开动画效果。分享给大家供大家参考，具体如下： &lt;!DOCTYPE = html> &lt;html&gt; &lt;head&gt; &lt;title&gt;www.jb51.net JS折叠展开动画&lt;/title&gt; &lt;style&gt; body{ margin: 0px; padding: 0px; } .red{ background-color:red; width:200px; height:200px; position:relative; left:-200px; top:0px; } .blue{
js实现展开收起菜单
05-22
js 实现菜单的展开收起，构建网站能有比较好的效果
JS实现列表的部分展开,收起及换一换功能
沪漂一族的博客
06-04 2097
&lt;div&gt; &lt;p class="classify"&gt;&lt;img src="${ctxStatic}/img/top.png" alt=""&gt;关键词 &lt;span&gt;Key word&lt;/span&gt;&lt;/p&gt; &lt;ul
js展开收起
m0_52618824的博客
04-01 1475
js展开收起js实现展开全部内容，收起全部内容_撸猫@冒泡泡的博客-CSDN博客_展开全部内容 html <div class="left-content"> <p>《考试与招生》杂志自改刊以来，在广大考生、教师、家长和社会各界的大力支持帮助下，社会影响日益扩大，刊物质量不断提高，为广大考生备战高考和宣传各类招生考试政策、信息等方面发挥了重要作用。</p> <p> “致力于为普通高考及其他各类教育考试与招生服...
js实现文字收起展开功能
cxy_pan0913的博客
12-08 934
【代码】js实现文字收起展开功能。
Vue.js实现文字超出指定高度后展开收起功能
彭世瑜的博客
09-23 3460
参考网站效果 爱企查：https://aiqicha.baidu.com/company_detail_28783255028393 天眼查：https://www.tianyancha.com/company/22822 Vue.js代码实现 组件：TextOverflow.vue <template> <div :class="{'overflow-hidden': !isShowMore}"> <slot></slot> &l
前端css实现多行文字的展开收起
05-05
实现多行文字的展开收起，可以通过CSS和JavaScript来完成。 首先，利用CSS的text-overflow属性来控制文本的显示方式，当文本超出指定的显示范围时，可以将多余的文本隐藏起来，并用省略号来代替。 其次，使用JavaScript来实现展开和收起的功能，当点击展开按钮时，将被隐藏的文本显示出来；当点击收起按钮时，将多余的文本隐藏起来。 以下是一个示例代码： HTML： ``` <div class="text-container"> <p class="text">这是一段需要展开和收起的文本，可以通过CSS和JavaScript来实现。</p> <button class="btn-expand">展开</button> <button class="btn-collapse">收起</button> </div> ``` CSS： ``` .text-container { position: relative; overflow: hidden; max-height: 100px; /* 设置文本的最大高度 */ } .text { margin: 0; padding: 0; line-height: 1.5; text-overflow: ellipsis; /* 超出文本范围时用省略号代替 */ white-space: nowrap; overflow: hidden; } .btn-expand, .btn-collapse { position: absolute; bottom: 0; right: 0; display: none; } .btn-expand { display: block; } .text-container.expanded .btn-expand { display: none; } .text-container.expanded .btn-collapse { display: block; } ``` JavaScript： ``` var textContainer = document.querySelector('.text-container'); var text = document.querySelector('.text'); var btnExpand = document.querySelector('.btn-expand'); var btnCollapse = document.querySelector('.btn-collapse'); btnExpand.addEventListener('click', function() { textContainer.classList.add('expanded'); }); btnCollapse.addEventListener('click', function() { textContainer.classList.remove('expanded'); }); ``` 以上代码实现了一个简单的多行文字展开收起的效果，可以根据实际需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值