前端开发者小程序前端开发视频|前端开发项目实战的视频|谷歌浏览器的前端开发工具
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”description” content=””>
<meta name=”keywords” content=””>
<title>字符串截取，收缩，显示更多</title>
<style type=”text/css”>
p {
width: 600px;
background: #ddd;
padding: 20px;
}
a {
text-decoration: none;
}
</style>
<script>
$(document).ready(function () {
//此方法只能一个收缩
//初始化
var $all = $(“.text_content”).html();
var $part = $all.slice(0, 80);
$(“.text_content”).html($part);
//字符串长度超过80，就出现省略号
function addx() {
if ($all.length > 80) {
$(“.text_content”).html($part + “…”);
}
}
addx();
//收缩点击判断
var Onoff = true;
$(“.btn_more”).click(function () {
if (Onoff) {
$(“.text_content”).html($all);
$(“.btn_more”).html(“收起”);
Onoff = false;
}
else {
$(“.text_content”).html($part);
$(“.btn_more”).html(“显示更多”);
addx();
Onoff = true;
}
});
});
</script>
</head>
<body>
<h1>定义和用法</h1>
<p>
<span class=”text_content”>方法在被选元素及子元素上添加一个或多个事件处理程序。 自 jquery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了
jquery 代码库</span>
<a href=”javascript:void()” class=”btn_more”>显示更多</a href=”javascript:void()”>
</p>
</body>
</html>
前端代码开发工具免费|前端开发教学视频判断|web前端开发助理面试
» 本文来自：前端开发者 » 《前端界面开发工具_string截取，收缩，显示更多,自动现出省略号》
» 本文链接地址：https://www.rokub.com/4621.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册