jQuery实现文章收起与展开功能
更新时间：2021年08月18日 09:22:58 作者：蓝色的冰块
这篇文章主要为大家详细介绍了jQuery实现文章收起与展开功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jQuery实现文章收起与展开功能的具体代码，供大家参考，具体内容如下
废话不多说，直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文章</title>
</head>
<body>
<div>
<p>文章收起与展开功能</p>
<div class="item">
<div>
<div style="color: #409EFF;">超过字数</div>
<span class="article">
MQTT是轻量级基于代理的发布/订阅的消息传输协议，设计思想是开放、简单、轻量、易于实现。
这些特点使它适用于受限环境。网络代价昂贵，带宽低、不可靠。
在嵌入设备中运行，处理器和内存资源有限。该协议的特点有：
使用发布/订阅消息模式，提供一对多的消息发布，解除应用程序耦合。
对负载内容屏蔽的消息传输。
使用 TCP/IP 提供网络连接。
</span>
<span class="see" style="color: #409EFF;"></span>
</div>
</div>
<br />
<div class="item">
<div>
<div style="color: #409EFF;">未超过字数</div>
<span class="article">ABCDEFGHIJKLNMOPQRSTUVWXYZ</span>
<span class="see" style="color: #409EFF;"></span>
</div>
</div>
<br />
<div class="item">
<div>
<div style="color: #409EFF;">超过字数</div>
<span class="article">
MOS的正确与否直接影响硬盘的正常使用，这里主要指其中的硬盘类型。
好在现在的机器都支持”IDE auto detect”的功能，可自动检测硬盘的类型。
当连接新的硬盘或者更换新的硬盘后都要通过此功能重新进行设置类型。
当然，现在有的类型的主板可自动识别硬盘的类型。
当硬盘类型错误时，有时干脆无法启动系统，有时能够启动，但会发生读写错误。
</span>
<span class="see" style="color: #409EFF;"></span>
</div>
</div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//记录文章当前状态
var onoff = false;
//使用$().each遍历设置每一篇文章
$('.item').each(function() {
//使用$(this).find()获取当前文章DOM
var article = $(this).find('.article');
//获取文章内容
var str = article.text();
//使用$(this).find()获取展开收起的DOM
var see = $(this).find('.see');
//当文章字数超过50个字时,只显示前50个字
if (str.length > 50) {
article.text(str.substr(0, 50) + '......');
see.text('[查看]'); //在文章末尾显示查看按钮
}
//设置按钮监听
see.click(function() {
if (onoff) {
article.text(str.substr(0, 50) + '......');
see.text('[查看]');
} else {
article.text(str);
see.text('[收起]');
}
onoff = !onoff
});
});
});
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了jquery中使用.each()遍历元素学习笔记,本文从实际项目经验总结而来,需要的朋友可以参考下2014-11-11
这篇文章主要介绍了jQuery简单操作cookie的插件,以实例形式分析了jQuery操作cookie的插件功能定义与使用技巧,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了JQuery animate动画应用,结合具体实例形式分析了jQuery使用animate动画实现选项卡及样式动态变化相关操作技巧,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了jQuery实现仿新浪微博浮动的消息提示框,具有智能定位功能,涉及jQuery控制页面元素浮动效果的实现技巧,需要的朋友可以参考下2015-10-10
效果说明：配合已有css样式，载入插件后，网页元素可以随意在窗口内拖拽，设置了原位置半透明和拖拽半透明的效果选项，可根据需要选择。另外，当页面上有多个可拖拽元素时，可以载入另外一个用于设置z-index的插件，模拟windows窗口点击置顶效果。2013-08-08
jQuery.extend 函数的详细用法，学习jquery的朋友可以参考下2012-06-06
这篇文章向大家推荐了一款基于jquery实现的简洁文件上传表单样式，实现效果大方精致，极力推荐给大家，希望大家可以喜欢。2015-11-11
jQuery Easyui Treegrid实现显示checkbox功能
本文通过实例代码给大家介绍jQuery Easyui Treegrid实现显示checkbox功能的方法，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-08-08
jQuery.validate.js表单验证插件的使用代码详解
Validate是基于jQuery的一款轻量级验证插件，内置丰富的验证规则，这篇文章主要介绍了jQuery.validate.js表单验证插件的使用代码详解,需要的朋友可以参考下2018-10-10
jquery mobile 实现自定义confirm确认框效果的简单实例
下面小编就为大家带来一篇jquery mobile 实现自定义confirm确认框效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
最新评论