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实现的页面详情展开收起功能示例
本文实例讲述了jQuery实现的页面详情展开收起功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery实现页面详情展开收起</title> <style> .detailpd { padding-top:10px; } </style> <script src=&q
-
jQuery实现文章收起与展开功能
本文实例为大家分享了jQuery实现文章收起与展开功能的具体代码,供大家参考,具体内容如下 废话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文章</title> </head> <body> <div> <p>文章收起与展开功能<
-
基于jQuery实现收缩展开功能
本文实例向大家分享了一款基于jQuery实现收起展开功能特效,供大家参考,具体内容如下 效果图: 点击倒三角可以进行展开操作 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-widt
-
Vue3+Element-Plus实现左侧菜单折叠与展开功能示例
目录 1.最终实现的效果图 2. 实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来,画按钮条UI结构,实现折叠与展开功能 2.3 实现点击该DIV时,触发菜单折叠与展开 2.4 折叠与展开功能是实现了,但是背景颜色并没有随着菜单折叠时跟着变小或展开时跟着变大 2.5. 最终效果 3. Home.vue 代码 1.最终实现的效果图 2. 实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来,画按钮条
-
react echarts tree树图搜索展开功能示例详解
目录 前言 最终效果 版本信息 核心功能: 关键思路: 附上代码 数据data.js 功能: TreeUtils 总结: 前言 umi+antd-admin 框架中使用类组件+antd结合echarts完成树图数据展示和搜索展开功能 最终效果 版本信息 "antd": "3.24.2", "umi": "^2.7.7", "echarts": "^4.4.0", "echart
-
基于jQuery实现搜索关键字自动匹配功能
今天我们就一起来看一个简单的基于jquery的关键字自动匹配的例子,希望文章能够对各位有帮助. 例子一 在项目中,有时候需要用户选择城市,但是城市太多,用户选择起来不太方便,所以提供了一个用户可以通过输入框输入城市的汉字或者拼音简写.结果示意图如下: 当输入拼音后结果示意图如下: 实现代码如下: <html><head><title>实时查询城市通过姓名或拼音简写</title></head><meta charset = "ut
-
jquery实现简单合拢与展开网页面板的方法
本文实例讲述了jquery实现简单合拢与展开网页面板的方法.分享给大家供大家参考.具体如下: 这是一款网页上常见的合拢(收缩).伸展面板代码,使用了jQuery插件,代码更加简化,点击面板的标题栏即可折叠.或展开这个层,是网上很流行的效果,由此可扩展出的功能还真挺多,只要动脑筋,一定能做出来. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-hidden-show-web-table-codes/ 具体代码如下: <!
-
jQuery+Ajax+PHP实现“喜欢”评级功能附源码下载
本文章来给大家介绍一个jQuery+Ajax+PHP实现"喜欢"评级功能代码,用户点击页面中自己喜欢的图片上的红心按钮时,前端页面向后台发送一个ajax请求,后台PHP程序接收请求后,查询IP库中是否已经有该用户的点击记录,如果没有,则将对应的数值+1,同时将该用户IP信息写入IP库,反之则告诉用户已经"喜欢过了". 源码下载地址:http://xiazai.jb51.net/201509/yuanma/loveit(jb51.net).rar 实现过程 本文基于
-
js实现文章文字大小字号功能完整实例
本文实例讲述了js实现文章文字大小字号功能的方法.分享给大家供大家参考.具体分析如下: 文字大中小是很多网站供用户阅读方便的一个功能,本文实例介绍的文字大中小字号功能可以在用户选择之后打开只要在同网站打开另一篇文章都会根据用户习惯来显示字体大小. 大家一定在某些大型网站看到过文章标题下三个按钮 "大"."中"."小",用来照顾不同人的阅读习惯.这里我就要介绍这种方法,而且比它们的还支持自动保存哦~只要选择一次,下次阅读自动调整到喜欢的字号. JS
-
jQuery实现的简单前端搜索功能示例
本文实例讲述了jQuery实现的简单前端搜索功能.分享给大家供大家参考,具体如下: html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>工程轻量化与可靠性技术实验室</title> </head> <body> <div class="content-r