设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 914|回复: 0

[新手入门] jQuery实现文本内容超出隐藏,点击展开

[复制链接]

374

主题

381

帖子

2558

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2558
发表于 2014-7-1 18:06:20 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
jQuery实现文本内容超出隐藏,点击展开
本文关键字词:jQuery,超出隐藏,jQuery截取

示例代码如下:
  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>jQuery实现文本内容超出隐藏,点击展开</title>
  5. </head>
  6. <body>
  7. <p id="text">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  8. <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
  9. <script>
  10. $(function(){
  11. var $t = $("#text");
  12. var $text = $t.html();
  13. $t.html($text.substring(0,200)+'.... <b id="show">点击查看全部内容</b>');
  14. $("#show").click(function(){
  15. $t.html($text);
  16. });
  17. });
  18. </script>
  19. </body>
  20. </html>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-10 20:40

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表