首页 > 其他 > 详细

jq实现展开全部内容,收起全部内容

时间:2017-09-04 15:46:04      阅读:341      评论:0      收藏:0      [点我收藏+]

1.内容超出就隐藏一部分。

效果

技术分享

2.实现代码: 

 

js部分涉及到多个

var contents=[];
var maxheight=150;
for (var i=0;i< Allbox.find(‘.neirong_nr‘).length;i++){
contents.push(Allbox.find(‘.neirong_nr‘).eq(i).html())
};
console.log(contents)
var hide = function (){
Allbox.find(‘.neirong_nr‘).each(function(){
if($(this).text().length>maxheight){
$(this).text($(this).text().substring(0,maxheight));
$(this).html($(this).html()+‘...‘);
$(this).parent().find(‘.zk_kuanwen‘).html("查看更多");
} else {
$(this).parent().find(‘.zk_kuanwen‘).hide();
}
});
};
hide();
Allbox.on(‘click‘, ‘.zk_kuanwen‘, function () {
var index=$(this).parent().parent().index();
// console.log()
if($(this).parent().find(‘.neirong_nr‘).html().length<contents[index].length){
console.log( contents[index])
$(this).parent().find(‘.neirong_nr‘).html(contents[index]);
$(this).html("收起文章");
more = false;
}else{
hide();
}

});

jq实现展开全部内容,收起全部内容

原文:http://www.cnblogs.com/dengxiaolei/p/7473777.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!