利用 jQuery 实现文章部分内容收缩
icon
password
tags
date
type
category
status
summary
slug
记得以前写过一篇名叫利用 Collapsible Elements 实现文章内容折叠效果的文章,当时 Willin 大师说过可以用 jQuery 来实现,无奈当时对 jQuery 毫无一点研究,只能硬着头皮…
记得以前写过一篇名叫利用 Collapsible Elements 实现文章内容折叠效果的文章,当时 Willin 大师说过可以用 jQuery 来实现,无奈当时对 jQuery 毫无一点研究,只能硬着头皮用插件解决,这短时间稍微研究了下 jQuery 后,发现实现起来其实很简单,无非就是使用 slideDown 和 slideUp 俩函数,但下面代码和 demo 里面默认的是 FadeIn 和 FadeOut 两个函数,效果是渐显和渐隐,为什么不用收缩效果呢?因为在 IE 里面用收缩函数会不完美,在此再次鄙视 IE。
结合 Willin 大师思路做出来的精简版:
现在这个应该算是比较完美的版本了,解决了按钮会落在展开内容下面的缺陷,但效果只有展开,如果需要更多效果,请参照后面的代码修改。
使用方法:在需要使用的地方用<div id=box-botton></div>包起来,如果你嫌字母太多的话,那就换个字母少的单词定义元素。
Demo:http://leo-n.com/demo/demo2.html >>链接已跑路几百年,2023/10迁移博客时注 😂
之前的代码如下:
依葫芦画瓢,如果你喜欢收缩形式(如果你能无视在 IE 中的缺陷的话),你就选择 slideDown 和 slideUp,如果喜欢直来直去的话,就选择 Show 和 Hide,想有点效果又顾虑 IE 缺陷的话,就用现在默认的,恩对了,还是那句话,必须加载 jQuery 框架,且在 footer.php 里加载以上代码。
还有,使用之前务必在模板 CSS 里定义.box{display:none;},当然,这样做出来你可能会觉得很简陋,呃,那就依自己喜好在.box里面加点佐料吧。
特别说明下,现在代码有一个可以称为 bug 的地方,就是展开后按钮位置是位于展开内容下面,对访客体验有点不好,但无奈于本人水平,没找到解决办法,高手请指点一下,我将不胜感激。~已经解决。
Demo:http://leo-n.com/demo/box.html >>链接已跑路几百年,2023/10迁移博客时注 😂
还有还有,我手上有几个淘江湖的玩偶邀请,想要的童鞋请留言,我能赠送的只限于下图显示为彩色的玩偶:
notion image

© Leo.N 2005-2024