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
Jquery实现文章内容的展开收缩效果
         本页正文内容约647个文字
         本文标签:

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

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

发表评论

电子邮件地址不会被公开, 推荐使用QQ快速评论!

评论

7条评论
  1. avatar

    她与未来 Lv.2 IBrowse r IBrowse r Android 4.4.2 Android 4.4.2 回复

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

    河北省保定市 电信

    1. 小陈 Lv.6 Chrome 56.0.2924.87 Chrome 56.0.2924.87 Windows Windows 回复

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

            湖南省邵阳市 电信

    2. 她与未来 Lv.2 QQbrowser QQbrowser Android 4.4.2 Android 4.4.2 回复

      回复了小陈:后者,

            河北省保定市 电信

    3. 她与未来 Lv.2 QQbrowser QQbrowser Android 4.4.2 Android 4.4.2 回复

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

            河北省保定市 电信

    4. 小陈 Lv.6 uBrowser 8.7 uBrowser 8.7 Windows Windows 回复

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

            湖南省邵阳市 电信

    5. 她与未来 Lv.2 QQbrowser QQbrowser Android 4.4.2 Android 4.4.2 回复

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

            河北省保定市 电信

    6. 小陈 Lv.6 uBrowser 8.7 uBrowser 8.7 Windows Windows 回复

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

            湖南省邵阳市 电信

00:00 / 00:00
顺序播放