欢迎光临
我们一直在努力

jquery实现多个文本的展开收起效果

昨天晚上找了一晚上也没找到一个合适的,都是单一的文字段落的展开和收起,很久都没碰过代码了,但是其中逻辑是明白的。看着jquery的教程一点点磨出来了。
其中最难的部分在于将文字超出的部分替换后,在找原来的文字,已经没有了。所以,我学到最重要的点在于conlist.clone();方法的应用。

下面是实现jquery多个文本的展开收起效果的代码:

<script>  
 var conlist=$("div.servicelist");  //获取div对象 多个
 var str22=conlist.clone();//将获取的html 复制一份 包括结构。
 var len=190;//文字显示的数量
function myFunction() {
	 
	 conlist.each(function(index,obj){//遍历
			var value = $(obj).html();
			var str = $(obj).text();
			//alert(str);
			console.debug(value);
			 var tempt = str;
			if (str.length > len) {
				$(obj).text(tempt.slice(0, len) + "...");//判断,如果超出要求文字的显示数量 用....表示
			}
			  var readmore = "<a onclick='showmore("+index+")'  style='color: orange;'>More↓</a>"
				$(obj).append(readmore);//添加一个按钮 负责文字的展开
			//console.debug(value);
	 });

}
 myFunction()
 function showmore(i) {   //方法负责文字的收起  
	 conlist.each(function(index,obj){
	 	if(i==index){ 
		 $(obj).html(str22.eq(i).html()); 
		   var readmore = "<a onclick='myFunction()'  style='color: orange;'>Up↑</a>" //添加收起按钮
		    $(obj).append(readmore);
		}
	  });
 }
</script>
赞(8)
未经允许不得转载:衡水seo博客 » jquery实现多个文本的展开收起效果
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

建站优化更专业 更敬业 更负责

建站报价联系我们