点击more在后面显示隐藏的部分，注意本例对中文无效
演示
?
?
XML/HTML Code
- <div?id="table">??
- ??
- ????<div?class="row">??
- ??????????
- ????????<div?class="desc">??
- ??????????????
- ????????????<p?class="excerpt">已经发了不少无刷新翻页的代码了，点击右侧“相关文章”可以找到，这边这个不同在于多了一个跳转页面。??
- 数据库与本站其他翻页的相而且本例更简单易懂数据库表??
- </p>??
- ????????</div>??
- ????????<div?class="clear"></div>??
- ????</div>??
- ??????
- ????<div?class="row">??
- ??????????
- ????????<div?class="desc">??
- ??????????????
- ????????????<p?class="excerpt">A?picture?is?worth?a?thousand?words.?Most?of?the?time,?I?found?that?a?complex?idea?can?be?conveyed?easily?with?a?single?still?image.?Infographic?is?a?good?example.?Infographic?is?a?graphic?representation?of?data,?information?and?or?knowledge.?I?have?collected?21?Amazing?and?beautiful?infographics,?enjoy!</p>??
- ????????</div>??
- ????????<div?class="clear"></div>?????????
- ????</div>??
- ??????
- ????<div?class="row">??
- ??????????
- ????????<div?class="desc">??
- ??????????????
- ????????????<p?class="excerpt">Another?post?that?demonstrate?the?power?of?HTML5?and?CSS3.?New?experimental?demonstrates?are?being?released?so?often,?so?I?must?make?another?post?for?it!?</p></div>??
- ????????<div?class="clear"></div>?????????
- ????</div>??
- ??????
- ??
- </div>??
?
JavaScript Code
- <script?type="text/javascript">??
- ??????
- ????$(function?()?{??
- ??
- ????????//?Grab?all?the?excerpt?class??
- ????????$('.excerpt').each(function?()?{??
- ??????????
- ????????????//?Run?formatWord?function?and?specify?the?length?of?words?display?to?viewer??
- ????????????$(this).html(formatWords($(this).html(),?30));??
- ??????????????
- ????????????//?Hide?the?extra?words??
- ????????????$(this).children('span').hide();??
- ??????????
- ????????//?Apply?click?event?to?read?more?link??
- ????????}).click(function?()?{??
- ??
- ????????????//?Grab?the?hidden?span?and?anchor??
- ????????????var?more_text?=?$(this).children('span.more_text');??
- ????????????var?more_link?=?$(this).children('a.more_link');??
- ??????????????????
- ????????????//?Toggle?visibility?using?hasClass??
- ????????????//?I?know?you?can?use?is(':visible')?but?it?doesn't?work?in?IE8?somehow...??
- ????????????if?(more_text.hasClass('hide'))?{?
- ????????????????more_text.show();?
- ????????????????more_link.html('???hide');?????????
- ????????????????more_text.removeClass('hide');?
- ????????????}?else?{?
- ????????????????more_text.hide();?
- ????????????????more_link.html('???more');?????????????
- ????????????????more_text.addClass('hide');?
- ????????????}?
- ?
- ????????????return?false;?
- ?????????
- ????????});?
- ????});?
- ?
- ????//?Accept?a?paragraph?and?return?a?formatted?paragraph?with?additional?html?tags?
- ????function?formatWords(sentence,?show)?{?
- ?
- ????????//?split?all?the?words?and?store?it?in?an?array?
- ????????var?words?=?sentence.split('?');?
- ????????var?new_sentence?=?'';?
- ?
- ????????//?loop?through?each?word?
- ????????for?(i?=?0;?i?<?words.length;?i++)?{?
- ?????
- ????????????//?process?words?that?will?visible?to?viewer?
- ????????????if?(i?<=?show)?{?
- ????????????????new_sentence?+=?words[i]?+?'?';?
- ?????????????????
- ????????????//?process?the?rest?of?the?words?
- ????????????}?else?{?
- ?????????
- ????????????????//?add?a?span?at?start?
- ????????????????if?(i?==?(show?+?1))?new_sentence?+=?'...?<span?class="more_text?hide">';????????
- ?
- ????????????????new_sentence?+=?words[i]?+?'?';?
- ?????????????
- ????????????????//?close?the?span?tag?and?add?read?more?link?in?the?very?end?
- ????????????????if?(words[i+1]?==?null)?new_sentence?+=?'</span><a?href="#"?class="more_link">???more</a>';??
- ????????????}?????????
- ????????}???
- ??????
- ????????return?new_sentence;??
- ??
- ????}?????
- ????</script>??
?
原文地址:http://www.freejs.net/article_jquerywenzi_96.html