jq点击更多收起效果
2019独角兽企业重金招聘Python工程师标准>>>
主要是截取字段,如果截取的字段和原来一样多,就显示原来的文本。
<div class="js-text-box">
<div class="hide js-text-content">
电视机制造(仅限分支机构经营);信息电子技术服务;科技信息咨询服务;电子、通信与自动控制技术研究、开发;计算机技术开发、技术服务软件技术服务软件技服务软件技术服务软件技术服务 电视机制造(仅限分支机构经营);信息电子技术服务;科技 信息咨询服务;电子、通信与自动控制技术研究、开发;计算机技术开发、技术服务软件技术服务软件技服务软件技术服务软件技术服务电视机制造(仅限分支机构经营);信息电子技术服务;科技 信息咨询服务;电子、通信与自动控制技术研究、开发;计算 电视机制造(仅限分支机构经营);信息电子技术服务;科技 信息咨询服务;电子、通信与自动控制技术研究、开发;计算机技术开发、技术服务软件技术服务软件技服务软件技术服务软件技术服务
</div>
</div>
textBox() ;
function textBox() {
var textAll = $(".js-text-content").text();
var textCut = textAll.substring(0,220);
var html = '' ;
if(textAll==textCut){
html = html + '<div class="toggle-text text-cut">'
+ '<span class="text">'
+ textAll
+ '</span>'
+ '</div>';
}else{
html = html + "<div class='toggle-text text-all'><span class='text'>"+textCut+"</span>...<a id='carryOut' href='javascript:;' οnclick='$(this).parent().addClass(\"hide\");$(\"#packUp\").parent().removeClass(\"hide\");'>更多</a></div>"
+ "<div class='toggle-text text-all hide'><span class='text'>"+textAll+"</span><a id='packUp' href='javascript:;' οnclick='$(this).parent().addClass(\"hide\");$(\"#carryOut\").parent().removeClass(\"hide\");'>收起</a></div>"
}
$(".js-text-box").html(html);
};
转载于:https://my.oschina.net/parchments/blog/1537180
jq点击更多收起效果相关推荐
- android 评论的展开功能,Android开发实现ListView点击展开收起效果示例
本文实例讲述了Android开发实现ListView点击展开收起效果.分享给大家供大家参考,具体如下: 废话不说先上效果: 实际上这是采用一个ExpandableListView实现的 布局文件很简单 ...
- 视频直播APP源码,通过css控制div内容展开更多/收起效果
视频直播APP源码,通过css控制div内容展开更多/收起效果 一. 实现思路 需要设置一个变量控制展开 / 收起效果 提前写好最高高度的class样式,超出这个高度多余内容会隐藏 只有在列表数据长度 ...
- android 展开收起功能,Android开发实现ListView点击展开收起效果示例
本文实例讲述了Android开发实现ListView点击展开收起效果.分享给大家供大家参考,具体如下: 废话不说先上效果: 实际上这是采用一个ExpandableListView实现的 布局文件很简单 ...
- 最多显示三行,多余...展开,点击展开收起 getClientRects
需求:显示文本,最多显示三行,多余的显示 ... 展开,点击展开收起. 效果如下: 需要考虑的点:换行,展开的时候遮住收起 如果是不需要有固定在右侧的展开收起,那么移动端直接用css3: overfl ...
- php ajax 上拉显示更多,PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载...
这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 ::点击加载更多内容:: 引入jQuery插件和jquery.more.js加载更多插件 jQuery $(function( ...
- html点击控制盒子左右移动,JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例 发布时间:2020-10-04 12:47:25 来源:脚本之家 阅读:121 作者:s_psycho 本文实例讲述了JS实现鼠标拖拽盒子移动及右键 ...
- Vue 实现在文本溢出后浮现Tooltip、及文本展开收起效果
目录 示例: 1. expandable模式(默认) - 文本展开收起效果: 2. tooltip模式 - 文本使用Tooltip效果: 3. tooltipExpandable模式 - 文本同时使用 ...
- html 点击增加样式,js点击添加css样式 css添加jq点击事件 JavaScript点击增加css样式...
js可实现点击后对div或者其他标签增加或者删除css样式,从而达到实现点击触发某种效果的目的.页面样式可以通过style修饰,也可以通过css修饰,改变css或者添加css可以改变页面的排版.代码如 ...
- 直播系统代码,点击产生动画效果并移动的特效
直播系统代码,点击产生动画效果并移动的特效 实现方式 TranslateAnimation translateAnimation = new TranslateAnimation(TranslateA ...
最新文章
- 论文简述 | CamVox: 一种低成本、高精度的激光雷达辅助视觉SLAM系统
- C/C++版数据结构之链表三
- qt creator报错处理积累
- 2.1.2 进程的状态与转换
- Winform中设置ZedGraph的字体和间距不随图形的缩放而缩放
- vs2005's addin folder
- Java编译过程、c/c++编译过程区别
- 点击出现黑色背景的解决
- Luogu3702 SDOI2017 序列计数 矩阵DP
- 菜鸟学做——三层交换综合模拟实验【1】
- lumisoft.net 邮件管理系列文章 - 如何判断附件为内嵌式还是附加式
- 狼群ps-天空大师扩展插件_扩展OctoberCMS-构建软删除插件
- 清明祭娭毑_原水_新浪博客
- Git使用笔记[持续更新]
- 苹果经典提示音_千篇一律?一招教你如何修改苹果微信提示音
- 服务器和售票系统,网上售票系统的开发与实现.doc
- 分享一个:批量下载个性化桌面壁纸和各种唯美图片的方法
- veu3.0 入门到精通
- 减法公式运算法则_加减乘除运算法则
- module.exports 与 exports.xxx 的区别
热门文章
- spider和python的关系_Scrapy框架-Spider和CrawlSpider的区别
- M进制转N进制(C++)
- C++ 整型所能表示的数据范围
- 自学了三个月的软件测试,从小白到自动化测试工程师,我是如何从零拿到大厂offer的
- Monkey稳定性测试,多少还是要了解一下的(上)
- Linux. C open创建文件,c-为什么open()用错误的权限创建我的文件?
- pycharm 安装PYQ5以及no Qt platform plugin could be initialized的问题
- mfc mysql delete_MFC中简单的数据库文件操作(添加,修改,查找,删除)
- php设计一个盒子类代码_PHP设计模式之备忘录模式(Memento)代码实例大全(25)...
- ssm read time out的原因_为什么得肝病的男人越来越多?爱喝酒不是原因,或跟老婆有关系!...