点击文章展开和收起代码实例

Html

Css

Js

  素材牛欢迎您，只有努力奋斗才会有美好的未来，没有任何人一开始就是高手www.sucainiu.com
  展开
  收起

.box { width:300px; } .unfold, .pack { display: none; color: red; cursor: pointer; }

$(document).ready(function(){ var box = $('#antzone').text(); function cutText() { if (box.length > 30) { $('.unfold').show(); $('#antzone').text(box.substr(0, 30) + "..."); }; }; cutText(); $('.unfold').click(function () { $('#antzone').text(box); $(this).hide(); $('.pack').show(); }); $('.pack').click(function () { cutText(); $(this).hide(); }); })

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.9.0

代码注释

（1）.$(document).ready(function(){})，当文档结构完全加载完毕再去执行函数中的代码。

（2）.var box = $('#antzone').text()，获取指定元素中的文本内容。

（3）.function cutText() {}，此函数实现了截取字符串的功能。

（4）.if (box.length > 30) {  $('.unfold').show();

  $('#antzone').text(box.substr(0, 30) + "...");

}，如果文本内容的长度大于30，那么就显示展开按钮，并且截取欠30个字符，其余的用三个点替代。

（5）.cutText()，执行截取操作。

（6）.$('.unfold').click(function () {

  $('#antzone').text(box);

  $(this).hide();

  $('.pack').show();

})，为展开按钮注册click事件处理函数。

点击此按钮，可以显示所有文本。

并隐藏当前按钮，同时显示收起按钮。

（7）.$('.pack').click(function () {

  cutText();

  $(this).hide();

}),为收起按钮注册click事件处理函数。

点击之后进行截取操作，并且显示展开按钮。