内容模块展开和收缩,默认超出长度“…”代替
html
<dl class="center_main_dl2 z_fact_list">
<dt class="b_collect_dt">
<a href="#" class="fl">陶博华章 商聚盛世”——唐山中国陶瓷博览中心项目隆重启动</a>
<p class="z_fact_con" data-con="">陶博华章 商聚盛世”——唐山中国陶瓷博览中心唐山中国陶瓷博览中心项目隆重启动陶博华章唐山中国陶瓷博览中心项目隆重启动陶博华章唐山中国陶瓷博览中心项目隆重启动陶博华章唐山中国陶瓷博览中心项目隆重启动陶博华章唐山中国陶瓷博览中心项目隆重启动陶博华章唐山中国陶瓷博览中心项目隆重启动陶博华章项目隆重启动陶博华章 商聚盛世”——唐山中国陶瓷博览中心项目隆项目重启动陶博启动陶博华隆华隆重启动陶博华章重重启动陶博华启动陶博华章</p>
</dt>
<dd><a href="javascript:void(0);" class="b_mom_btn3 y_btn fl">展开</a><span class="center_time fr">5秒钟前</span></dd>
</dl>
js
$(document).ready(function(){
//内容过长添加限制
var factP = $(".z_fact_con").toArray();
for (var i = 0; i < factP.length; i++) {
var factText = factP[i].innerHTML;
factP[i].setAttribute("data-con",factText)//存到data中,展开搜索时查找原始内容
if (factText.length > '80') {
factP[i].innerHTML = factText.substring(0, 80)+"...";
}
}
//展开收缩功能实现
var isOn = true;//声明默认开关
$(".b_mom_btn3").on('click',function(){
var $p = $(this).parent().prev().children('p'),//操作按钮结构有点不合理,查找麻烦了 <..>
dataCon = $p.attr('data-con');
if (dataCon.length > '80'){
if (isOn == true){
$p.height('auto').text(dataCon)
$(this).text('收缩');
isOn = !isOn;
}else {
$p.height('40').text(dataCon.substring(0,80)+"...");
$(this).text('展开');
isOn = !isOn;
}
}
})
});