利用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

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

40 Comments

  1. 阿修
    2009/11/22

    莫非是沙发……

    回复
    1. Leo.N
      2009/11/22

      必须是。。。

      回复
  2. 万戈
    2009/11/22

    感觉有点类似关闭侧边栏那样的功能

    回复
    1. Leo.N
      2009/11/22

      逻辑上还真是差不多。。

      回复
  3. 林木木
    2009/11/22

    Willin大师那也有写过这个哦,我也在用,一句JS搞定的呀~

    回复
    1. Leo.N
      2009/11/22

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

      回复
  4. A.shun
    2009/11/22

    jQuery的动态效果挺有意思

    回复
    1. Leo.N
      2009/11/22

      恩,正因为这样所以我比较喜欢折腾下jQuery。。

      回复
  5. 吖Bee
    2009/11/22

    这效果真Cool

    回复
    1. Leo.N
      2009/11/23

      呵呵,只需简单几步,你就可以拥有。。

      回复
  6. 呵呵,jquery挺强大的,支持

    回复
  7. 一块冰儿
    2009/11/28

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

    回复
    1. Leo.N
      2009/11/28

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

      回复
  8. 一块冰儿
    2009/11/28

    其实更喜欢这个主题来着。。

    回复
    1. Leo.N
      2009/12/03

      谢谢得到您的赞同!

      回复
  9. cloudshare
    2009/12/02

    弱弱地问一下,如果我用wp做微博,可否用这个jquery实现评论框的收缩和展开呢?

    回复
    1. Leo.N
      2009/12/03

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

      回复
      1. cloudshare
        2009/12/03

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

        回复
        1. Leo.N
          2009/12/07

          你可参考下我发给你的主题,看样子里面有你需要的东西。

          回复
          1. cloudshare
            2009/12/07

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

  10. 上海女seo朱云
    2009/12/03

    不是很懂代码

    回复
  11. 上海女seo朱云
    2009/12/03

    我想要贤惠女
    可以不

    回复
  12. 林木木
    2009/12/07

    又好久没更新啦!忙啥呢?

    回复
    1. Leo.N
      2009/12/08

      唉。。。没什么忙的。。。只是找不到该写啥东西了。。。

      回复
  13. Willin Wang
    2009/12/08

    哦?……嘿嘿

    回复
  14. HzlzH
    2009/12/11

    最近都在搞这个侧边栏,有仇啊!

    回复
  15. GEZ鸽子
    2009/12/11

    MY是MT啊!

    回复
  16. bolo
    2009/12/18

    我想要一个玩偶,不知道如何获取呢?

    回复
    1. Leo.N
      2009/12/18

      很遗憾,现在这活动已经结束了。。。

      回复
  17. Nox
    2009/12/18

    我也想要一个玩偶,可以送我一个么?

    回复
    1. Leo.N
      2009/12/18

      你来晚了。。。活动结束啦。。

      回复
  18. 精辟
    2009/12/18

    玩偶已经有了。不过,一点都不精致。。

    回复
    1. Leo.N
      2009/12/18

      我还没收到。。。有点悲剧。。

      回复
  19. zwwooooo
    2010/01/02

    主题试用了这个效果了

    回复
  20. 浪漫小屋
    2010/02/09

    很好··很强大··很赞··

    回复
  21. nike force
    2010/09/14

    今天这个更好了!

    回复
  22. Raymond
    2011/02/15

    不会代码呀。请问博主之前用的插件是神马呀?谢谢。

    回复
    1. Leo.N
      2011/02/15

      collapsible-elements 你搜一下看看

      回复
      1. Raymond
        2011/02/15

        谢谢啦。

        回复
  23. TammieGoff
    2011/10/15

    The credit loans seem to be important for guys, which are willing to start their career. As a fact, it is easy to receive a financial loan.

    回复

发表评论

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

Scroll to top