iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript实现文字展开和收起效果
  • 267
分享到

JavaScript实现文字展开和收起效果

2024-04-02 19:04:59 267人浏览 薄情痞子
摘要

列表式的文字的展开和收起的实现,供大家参考,具体内容如下 需求: 1、当文字超出目标值,则截取目标值,其他隐藏,同时显示“展开”二字和下拉箭头; 2、点击“展开”显示所有文字,同时改

列表式的文字的展开和收起的实现,供大家参考,具体内容如下

需求:

1、当文字超出目标值,则截取目标值,其他隐藏,同时显示“展开”二字和下拉箭头;
2、点击“展开”显示所有文字,同时改为“收起”和上拉箭头
3、如果文字本身就没有超过目标值,则显示所有文字即可

之前想过使用CSS设置超出多少行隐藏,或者给Li标签设置高度隐藏,但都无法满足以上第三条,所以想到了下边一种方法将就可以使用

思路:

1、初始遍历需要展开和收起的元素,超出目标值隐藏,然后把所有标签中的内容存起来(后边显示全部的时候会用到)
2、点击展开和收起的时候,根据当前的内容去存储的值中匹配,匹配到之后做相应的处理,展示出来

html


<ul class="outList">
        <li>
            <div>5-14号</div>
            <ul class="innerList">
                <li class="WordsContent">111111111111111111111111</li>
                <li class="wordsContent">222222222222222222222222</li>
                <li class="wordsContent">333333333333333333333333</li>
            </ul>
        </li>
        <li>
            <div>5-15号</div>
            <ul class="innerList">
                <li class="wordsContent">4444</li>
                <li class="wordsContent">5555555555555555555555555</li>
                <li class="wordsContent">6666666666666666666666666</li>
            </ul>
        </li>
</ul>

CSS


ul,li {
   list-style: none;
 }
.innerList>li {
     margin-bottom: 0.2rem;
     border-bottom: 0.01rem solid green;
     box-sizing: border-box;
     padding: 0.2rem 5% 0.7rem 3%;
     position: relative;
     margin-bottom: 0.3rem;
 }
 .open {
     font-size: 0.22rem;
     color: #12309E;
     position: absolute;
     right: 0.2rem;
     bottom: 0.1rem;
     font-weight: bold;
 }
 .close {
     font-size: 0.22rem;
     color: #12309E;
     position: absolute;
     right: 0.2rem;
     bottom: 0.1rem;
     font-weight: bold;
 }

js


//新闻的展开收起部分
var objList = $(".wordsContent");   //需要展开收起的li标签元素
var maxNum = 5;                     //目标值的长度
var arr = [];                       //需要展开收起的所有文字汇总
objList.delegate(".open", "click", function () {
    openClose(true, this)
})
objList.delegate(".close", "click", function () {
    openClose(false, this)
})
//初始化封装,初始化是为了1:存储原本的Li标签中的内容;2:超出目标值的文字隐藏
function init(objList, maxNum) {
    objList.each(function (index, item) {
        arr.push($(item_).text())
        if ($(item).text().length > maxNum) {
            $(item).html($(item).text().substr(0, maxNum) + "<span class='open'>展开<img src='./image/down^.png'/></span>")
        }
    })
}
init(objList, maxNum)

//展开和收起的封装
function openClose(boo, clickObj) {
    var final = '';
    arr.map(function (item, index) {
        if (item.match($(clickObj).parents(".wordsContent").text().substring(0, $(clickObj).parents(".wordsContent").text().length - 2))) {
            final = item
        }
    })
    if (boo) {
        $(clickObj).parents(".wordsContent").html(final + "<span class='close'>收起<img src='./image/up^.png'/></span>")
    } else {
        $(clickObj).parents(".wordsContent").html(final.substr(0, maxNum) + "<span class='open'>展开<img src='./image/down^.png'/></span>")
    }
}

效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: JavaScript实现文字展开和收起效果

本文链接: https://www.lsjlt.com/news/136351.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript实现文字展开和收起效果
    列表式的文字的展开和收起的实现,供大家参考,具体内容如下 需求: 1、当文字超出目标值,则截取目标值,其他隐藏,同时显示“展开”二字和下拉箭头; 2、点击“展开”显示所有文字,同时改...
    99+
    2024-04-02
  • 纯CSS3如何实现移动端展开和收起效果
    这篇文章给大家分享的是有关纯CSS3如何实现移动端展开和收起效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。展示效果:HTML代码<section class="block"...
    99+
    2023-06-08
  • web中如何实现列表展开收起效果
    这篇文章主要为大家展示了“web中如何实现列表展开收起效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“web中如何实现列表展开收起效果”这篇文章吧。$(&qu...
    99+
    2024-04-02
  • React文字展开收起组件的实现示例
    目录前言背景开发1.1 定义组件所需字段1.2 获取截断后的文字1.3 获取展开收起按钮1.4 展开收起逻辑1.5 完整代码1.5.1 逻辑代码1.5.2 样式代码1.6 安装使用组...
    99+
    2024-04-02
  • Vue实现文本展开收起功能
    本文实例为大家分享了Vue实现文本展开收起功能的具体代码,供大家参考,具体内容如下 先说说需求,以及实现的需求 1、移动端H5,发表留言后跳转到评论列表,超过5行文字,多余的需要隐藏...
    99+
    2024-04-02
  • jQuery实现文章收起与展开功能
    本文实例为大家分享了jQuery实现文章收起与展开功能的具体代码,供大家参考,具体内容如下 废话不多说,直接上代码 <!DOCTYPE html> <html ...
    99+
    2024-04-02
  • vue+elementUl实现展开和收起搜索功能
    目录实现效果如下:需求:需求分析:解决思路:代码解析:实现效果如下: 需求: 由于后台搜索选项有很多,影响页面美观,所以一进来要隐藏一部分搜索项,只保留1行, 点击【展开搜索】...
    99+
    2023-01-16
    vue +elementUl展开和收起 vue 展开和收起
  • JavaScript实现橱窗展示效果
    本文实例为大家分享了JavaScript实现橱窗展示效果的具体代码,供大家参考,具体内容如下 1.先搭架子 * { margin: 0; ...
    99+
    2024-04-02
  • Android ChipGroup收起折叠效果怎么实现
    这篇文章主要介绍“Android ChipGroup收起折叠效果怎么实现”,在日常操作中,相信很多人在Android ChipGroup收起折叠效果怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希...
    99+
    2023-07-04
  • Android TextView实现多文本折叠、展开效果
    背景在开发过程中,当我们的需求中包含说说或者评论等内容的展示时,我们都会考虑当内容太多时该如何显示。当内容的字数太多,如果全部展示出来可能会影响体验效果,但是又不能只截取一部分内容进行展示,此时就需要考虑使用多行显示折叠的效果来实现。效果图...
    99+
    2023-05-31
    android textview roi
  • CSS3怎么实现侧边栏展开收起动画
    这篇文章主要讲解了“CSS3怎么实现侧边栏展开收起动画”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS3怎么实现侧边栏展开收起动画”吧!@keyfram...
    99+
    2024-04-02
  • 微信小程序怎么实现text文本的展开与收起
    这篇文章主要介绍了微信小程序怎么实现text文本的展开与收起 的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序怎么实现text文本的展开与收起 文章都会有所收获,下面我们一起来看看吧。先看看布局文件,关...
    99+
    2023-06-26
  • 如何用javascript实现文字滚动效果
    这篇文章主要介绍“如何用javascript实现文字滚动效果”,在日常操作中,相信很多人在如何用javascript实现文字滚动效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解...
    99+
    2024-04-02
  • JavaScript实现字符雨效果
    本文实例为大家分享了JavaScript实现字符雨效果的具体代码,供大家参考,具体内容如下 <html>     <head>         <met...
    99+
    2024-04-02
  • JavaScript如何实现橱窗展示效果
    这篇文章将为大家详细讲解有关JavaScript如何实现橱窗展示效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1.先搭架子* {     &...
    99+
    2023-06-25
  • jquery实现手风琴展开效果
    本文实例为大家分享了jquery实现手风琴展开效果的具体代码,供大家参考,具体内容如下 手风琴模式实现方式: dom层代码: <div class="accordionWrap...
    99+
    2024-04-02
  • element实现导航栏收起展开功能及思路
    目录element 导航栏收起展开实现思路PS:Vue结合element-ui实现导航菜单展开收缩小功能上篇文章介绍了vue使用ElementUI时导航栏默认展开功能的实现,今天介绍...
    99+
    2023-01-16
    element 导航栏收起展开 element 导航栏收起 element 导航栏 element-ui展开收缩
  • JavaScript canvas实现字符雨效果
    本文实例为大家分享了JavaScript canvas实现字符雨效果的具体代码,供大家参考,具体内容如下 字符雨效果 分析如何实现 字符雨从上往下逐渐消失: 这是canvas每次画...
    99+
    2024-04-02
  • vue实现超过两行显示展开收起的代码
    目录vue超过两行显示展开收起vue多个展开收起功能说下思路尝试vue超过两行显示展开收起 基于vue-cli2,sass,vant(ui组件):https://youzan.git...
    99+
    2022-11-13
    vue展开收起 超过两行展开收起 vue显示展开收起
  • React实现复杂搜索表单的展开收起功能
    给时间时间,让过去过去。 上节我们写过了【搜索】表单,以及查询、重置功能。本节对于需要展开收起效果的查询表单 进行概述,主要涉及前端样式知识。 样式效果如下: &nbs...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作