利用jQuery实现文章部分内容收缩

  记得以前写过一篇名叫利用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.com/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.com/demo/box.html

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

《利用jQuery实现文章部分内容收缩》上有40条评论

    1. 我居然没注意到。。。失败,我看了下,Willin大师的代码的确够精简。。不过他的在使用中要手动添加添加两行代码,我的只需添加一行,看样子我把他的和我的整合下就能出现最精简的了,哈哈。

  1. 爆炸喜欢你页面右上角那个解散侧边啦啊!!!具体怎么弄啊?~~~~教教我啊。。我看不懂上面的那个。。。写个详细的教程好不?~~~~比如要改哪个文件的哪边。。= =

    1. 这篇文章并不是讲解解散侧边栏的。。。解散侧边栏的我没写,你去http://immmmm.com/off-display-wordpress-sidebar.html看下。。

    1. 明显可以,你修改下容器id、class之类的就行了,逻辑上的处理应该没问题,再高级的可以修改为形似mg12那种点击之后再动态加载内容的,但我还没搞透彻。。

      1. 从来没学过js,按照Willin网站上的代码搞了一整天,总算有点眉目了,点击评论后可以直接下来出commentform 。但还有两个硬伤:第一,输入评论确认提交后网页直接返回到独立评论页面,如果能在原有页面上无刷新显示该多好哈。第二,commentform上方不显示已有评论,这个很奇怪。

          1. 我已经自行解决了那个问题,主题文件comment.php改为系统默认的评论列表代码后就能显示所有评论了。欢迎到我的网站去体验一下哈。不过还得感谢您给我发的东西,非常好的一个主题,给了我另外一种解决思路。

发表评论

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