网站首页 文章专栏 一步步制作时光轴(三)(JS篇)
一步步制作时光轴(三)(JS篇)
编辑时间:2017-03-05 19:01 作者:Absolutely 浏览:1381 评论:8

小赌为快

成品展示


    此处无非就两个功能:


    点击年份展开或折叠对应年份下面的数据,点击月份展开或折叠对应月份的数据。


    这里我是用jQuery的slideToggle()和toggleClass()两个函数来实现的:

    $('.monthToggle').click(function () {
        $(this).parent('h3').siblings('ul').slideToggle('slow');
        $(this).siblings('i').toggleClass('fa-caret-down fa-caret-right');
    });
    $('.yearToggle').click(function () {
        $(this).parent('h2').siblings('.timeline-month').slideToggle('slow');
        $(this).siblings('i').toggleClass('fa-caret-down fa-caret-right');
    });
     先为每个年份和月份分别绑定click函数,然后根据自己Dom的具体情况去查找对应需要隐藏与显示的内容,再调用slideToggle()函数来实现展开与折叠,这个函数是jQuery封装好的动画。如果想要更酷炫的展开与折叠可以考虑自己写动画,然后toggleClass('你的动画')。




好吧,没想到这么简单。要感谢jQuery封装好的动画!



    出自:不落阁

    链接:www.lyblogs.cn

    转载请注明出处!



来说两句吧
最新评论
  • ★羽依非诺☆
    ★羽依非诺☆ 2018-01-05 15:50:02
    666
  • 明月弯弓
    明月弯弓 2017-05-03 17:39:29

    非常不错!可是我觉得,有小小的瑕疵:

    1、点击月份收缩时,能否把下方多余的线去掉

    2、能否点击月份旁边的小圈圈也实现收缩功能?

  • 明月弯弓
    明月弯弓 2017-05-03 17:41:22
    补充请问:能否分享一下怎么处理后台的数据,让它生成时光轴数据,供前台调用?
  • Absolutely
    Absolutely 2017-05-05 17:31:22
    好的  这个问题得想想
  • 你在哪
    你在哪 2017-06-13 11:08:31
    [白眼][微笑]自少得有一个字吧
  • Exception
    Exception 2017-07-25 20:10:08
    博主  后台数据怎么储存的 
  • 葫芦娃
    葫芦娃 2017-11-24 22:45:51
    123123
  • 葫芦娃
    葫芦娃 2017-11-24 22:45:51
    123123