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

/ 40评 / 0

  记得以前写过一篇名叫利用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条回应:“利用jQuery实现文章部分内容收缩”

  1. 阿修说道:

    莫非是沙发……

  2. 万戈说道:

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

  3. 林木木说道:

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

    • Leo.N说道:

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

  4. A.shun说道:

    jQuery的动态效果挺有意思

  5. 吖Bee说道:

    这效果真Cool

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

  7. 一块冰儿说道:

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

    • Leo.N说道:

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

  8. 一块冰儿说道:

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

  9. cloudshare说道:

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

    • Leo.N说道:

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

      • cloudshare说道:

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

        • Leo.N说道:

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

          • cloudshare说道:

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

  10. 不是很懂代码

  11. 我想要贤惠女
    可以不

  12. 林木木说道:

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

  13. Willin Wang说道:

    哦?……嘿嘿

  14. HzlzH说道:

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

  15. GEZ鸽子说道:

    MY是MT啊!

  16. bolo说道:

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

  17. Nox说道:

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

  18. 精辟说道:

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

  19. zwwooooo说道:

    主题试用了这个效果了

  20. 浪漫小屋说道:

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

  21. nike force说道:

    今天这个更好了!

  22. Raymond说道:

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

  23. TammieGoff说道:

    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.

发表评论

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.