javascript查看详情与收起详情

最新推荐文章于 2023-03-03 15:58:22 发布

许增强

最新推荐文章于 2023-03-03 15:58:22 发布

阅读量2.7k

点赞数

分类专栏： jQuery & javaScript

本文链接：https://blog.csdn.net/xuzengqiang2/article/details/40650757

版权

jQuery & javaScript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

直接上代码。

调用方法：

 <div id='content_div'>
		详情内容
</div>
调用方法:
$("#content_div").detailControl({maxSize:100});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<style type="text/css">
	*{margin:0;padding:0;font-family:微软雅黑;font-size:10pt}
	.content{width:150px;border:1px solid #AFAFAF;margin:100px auto;border-radius:4px;padding:4px}
</style>
</head>

<body>
	<div class="content">
    	啊打算离开解放啦看设计大方接撒看得见骄傲的上课林凤娇奥斯卡大家看法垃圾啊离开的睡觉
        了放假的了看风景啊看电视减肥了空间阿斯顿老卡机发啦快点就富利卡撒娇大连开发机啊打算
        离开房间啦看电视解放啦看的富利卡都是解放啦看电视剧富利卡介绍的立刻就发了看电视解放
        啦看的时间富利卡时间地方了卡机收到了付款
    </div>
    
</body>
<script type="text/javascript">
;(function($){
	//详情控制,请传入一个jQuery对象,options:参数列表
	//@author:xuzengqiang
	//@since :2015-3-16 13:57:02
	jQuery.fn.detailControl = function(options){
		var defaultOptions = {
			//详情最大字数
			maxSize:50,
			//链接颜色
			color:'#3399CC',
			//内容
			content:$(this).text()
		};	
		var settings = jQuery.extend(defaultOptions,options||{}),node,outer=$(this);
		
		var Control = {
				//执行
				execute:function(){
					if(settings.content.length > settings.maxSize) {
						outer.text(settings.content.substr(0,settings.maxSize)+"...");
						outer.append("<a href='javascript:void(0)' class='content-control'>∨查看详情</a>");	
						node = outer.find("a.content-control");
						node.css("color",settings.color);
						node.click(function(){
							Control.show();
						});
					}		
				},
				//显示详情
				show:function(){
					outer.text(settings.content).append(node);
					node.text("∧收起详情");
					node.unbind("click").click(function(){
						Control.hide();
					});
				},
				//关闭详情 
				hide:function(){
					outer.text(settings.content.substr(0,settings.maxSize)+"...").append(node);	
					node.text("∨查看详情");
					node.unbind("click").click(function(){
						Control.show();
					});
				}
			};
		return this.each(function(){
			Control.execute();
		});
	};
})(jQuery);
$(".content").detailControl();
</script>	
</html>