Tags: Posted in Tech, WordPress 35 条留言

　　记得以前写过一篇名叫利用Collapsible Elements实现文章内容折叠效果的文章，当时Willin大师说过可以用jQuery来实现，无奈当时对jQuery毫无一点研究，只能硬着头皮用插件解决，这短时间稍微研究了下jQuery后，发现实现起来其实很简单，无非就是使用slideDown和slideUp俩函数，但下面代码和demo里面默认的是FadeIn和FadeOut两个函数，效果是渐显和渐隐，为什么不用收缩效果呢？因为在IE里面用收缩函数会不完美，在此再次鄙视IE。

　　结合Willin大师思路做出来的精简版：

$(document).ready(function() {
var botton='<span  style="cursor: pointer; color:#CC0033;background:#000;">点我</span>';
$('#box-botton').append(botton);
//向#box-botton内添加上面定义的按钮
$('#box-botton>p').addClass('box');//为#box-botton内的<P>...</P>内添加class=botton
$('.box').insertAfter('.botton');
//把按钮放在展开内容之前，因为默认会把按钮放在展开内容之后
$('.botton').click(function() {
$(this).siblings().slideToggle(500);return false;});
//使用siblings是为了选择全部包含class=box的段落，如果使用next或prev的话只能选择相邻的同辈元素，也就是上面的一个或下面的一个，如果存在多个段落的话就会失效。
});

　　现在这个应该算是比较完美的版本了，解决了按钮会落在展开内容下面的缺陷，但效果只有展开，如果需要更多效果，请参照后面的代码修改。

　　使用方法：在需要使用的地方用<div id=box-botton></div>包起来，如果你嫌字母太多的话，那就换个字母少的单词定义元素。

　　Demo：http://leo-n.cn/demo/demo2.html

　　之前的代码如下：

$(document).ready(function() {
var off='<span class="show-box" style="cursor: pointer; color:#CC0033;background:#000;">召唤出来</span>';
var on='<span class="close-box" style="cursor: pointer; color: #CC0033;background:#000;display:none;">解散回去</span>';//定义按钮
$('#box-botton').append(on);
$('#box-botton').append(off); //向#box-botton内添加上面定义的按钮
$('#box-botton>p').addClass('box');//为#box-botton内的p标签添加class=box
$('.box').insertAfter('.show-box');
$('.box').insertAfter('.close-box');
$('.show-box').click(function() {
$('.show-box').hide();
$('.close-box').show();
//$('.box').slideDown('slow');//缓慢展开
$('.box').fadeIn(1200);//在1.2s之内渐显
//$('.box').show();//直接显示
});
$('.close-box').click(function() {
$('.close-box').hide();
$('.show-box').show();
//$('.box').slideUp('slow');
$('.box').fadeOut(1200);
//$('.box').hide();
});
});

依葫芦画瓢，如果你喜欢收缩形式（如果你能无视在IE中的缺陷的话），你就选择slideDown和slideUp，如果喜欢直来直去的话，就选择Show和Hide，想有点效果又顾虑IE缺陷的话，就用现在默认的，恩对了，还是那句话，必须加载jQuery框架，且在footer.php里加载以上代码。

　　还有，使用之前务必在模板CSS里定义.box{display:none;}，当然，这样做出来你可能会觉得很简陋，呃，那就依自己喜好在.box里面加点佐料吧。

　　特别说明下，现在代码有一个可以称为bug的地方，就是展开后按钮位置是位于展开内容下面，对访客体验有点不好，但无奈于本人水平，没找到解决办法，高手请指点一下，我将不胜感激。已经解决。

　　Demo：http://leo-n.cn/demo/box.html

　　还有还有，我手上有几个淘江湖的玩偶邀请，想要的童鞋请留言，我能赠送的只限于下图显示为彩色的玩偶：

1,129 views 2009/11/21