收起展开效果代码

本文主要是介绍收起展开效果代码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

上图效果：

html:

 

{"mData": "summary","mRender": function (data, type, row) {var summarystr = '';if (row.summary != null) {if (row.summary.length < 50) {summarystr = '<div style="word-break:break-all;word-warp:break-word;">' + row.summary + '</div>';} else {summarystr = '<div style="word-break:break-all;word-warp:break-word;">'+ row.summary.substr(0, 50) +'<br><span style="color:#3ea49d;cursor:pointer;" class="zhan zhan' + row.id + '" dataid="' + row.id + '">' +'<span style="border: 1px solid #3ea49d;margin:0.5px;padding:0;color:#3ea49d;" >.......展开</span></span>' +'<span style="display: none;" class="zs' + row.id + '">' + row.summary.substr(50, row.summary.length) +'<span style="color:#f3565d;cursor:pointer;"  class="shou shou' + row.id + '" dataid="' + row.id + '">' +'<span style="border: 1px solid #f3565d;margin:0.5px;padding:0;color:#f3565d;" >收起</span></span></span></div>';}}var html = [];html.push(summarystr);return html.join('');}
}

js:

 

 

//展开和收缩
$(".zhan").live('click', function () {var strid = $(this).attr("dataid");$(this).css('display', 'none');$('.zs' + strid).css('display', 'block');$('.shou' + strid).css('display', 'block');
});
$(".shou").live('click', function () {var strid = $(this).attr("dataid");$(this).css('display', 'none');$('.zs' + strid).css('display', 'none');$('.zhan' + strid).css('display', 'block');
});

 

 

 

这篇关于收起展开效果代码的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---