利用 jQuery 实现文章部分内容收缩
icon
password
tags
Import
WordPress
CSS
date
Nov 21, 2009
type
Post
category
折腾
status
Published
summary
记得以前写过一篇名叫利用CollapsibleElements实现文章内容折叠效果的文章，当时Willin大师说过可以用jQuery来实现，无奈当时对jQuery毫无一点研究，只能硬着头皮
slug
slide-post-with-jquery
记得以前写过一篇名叫利用 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迁移博客时注 😂
还有还有，我手上有几个淘江湖的玩偶邀请，想要的童鞋请留言，我能赠送的只限于下图显示为彩色的玩偶：
Loading...