昨天晚上找了一晚上也没找到一个合适的,都是单一的文字段落的展开和收起,很久都没碰过代码了,但是其中逻辑是明白的。看着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>
评论前必须登录!
注册