Jquery实现文章内容的展开收缩效果
  • 内容
  • 相关

使用jquery来实现文章内容的展开折叠,本文中搭配使用一个php中自定义的函数来辅助实现此功能。

关于本文中使用到的字符串截取函数cut_str,请戳这:https://suppore.cn/304.html

html代码,定义两个方法OpenWord和CloseWord:

<p class="contentp"><?=cut_str($bookinfo['futitle'],100)?><a href="javascript:void(0);" onclick='OpenWord()'>【展开】</a></p>

js/jquery代码:

<script>
  function OpenWord(){
    $('p.contentp').html("<?php echo $bookinfo['futitle'];?><a href='javascript:void(0);' onclick='CloseWord()'>【收起】</a>");
  }
  function CloseWord(){
    $('p.contentp').html("<?php echo cut_str($bookinfo['futitle'],100);?><a href='javascript:void(0);' onclick='OpenWord()'>【展开】</a>");
  }
</script>
1486452489287969.gif
点赞
X
赞助一下:
    支付宝    微信    QQ红包

打开支付宝扫一扫
Jquery实现文章内容的展开收缩效果
         本页正文内容约647个文字
         本文标签:

         版权声明:若无特殊注明,本文皆为“懒人的小窝”原创,转载请保留文章出处。

         本文链接:https://suppore.cn/454.html   百度已收录

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

7条评论
  1. avatar

    她与未来 Lv.2    河北省保定市 电信    回复

    不错,模板评论无法设置网址,提示于所请求不一致

    1. 头像

      小陈 Lv.6    湖南省张家界市 电信    回复

      回复了她与未来:提交框还是评论框,评论框无法提交那是因为我弄了反评论插件,提交框无法输入网址的话目前我只发现在QQ浏览器里有这个情况。

    2. 头像

      她与未来 Lv.2    河北省保定市 电信    回复

      回复了小陈:后者,

    3. 头像

      她与未来 Lv.2    河北省保定市 电信    回复

      回复了小陈:我目测和QQ获取有关。对了,评论完后有一个div层,不会消失。

    4. 头像

      小陈 Lv.6    湖南省张家界市 电信    回复

      回复了她与未来:那应该是吧,div层忘记回pjax了

    5. 头像

      她与未来 Lv.2    河北省保定市 电信    回复

      回复了小陈:ajax评论结束后.hide隐藏div就可以了。

    6. 头像

      小陈 Lv.6    湖南省张家界市 电信    回复

      回复了她与未来:好的,了解。