jQuery树形评论时间轴效果
树形评论列表的时间轴效果,视觉上挺抓人眼球,交互上也比较友好。你要是做论坛、博客、或者需要嵌套回复的产品页面,这种布局就蛮合适的。
基于 jQuery 搞定,不用引入太多花里胡哨的库。结构上就是一个
,每条评论放在 里,根评论和回复评论加不同 class,方便定位层级。
关键点在于层级控制。用 level-0
、level-1
这种类名标记深度,再加点 CSS 做缩进,层次感一下就出来了。再配合 ::before
伪元素搞个垂直线,就是个时间轴范儿。
想要评论可展开收起?用 slideToggle()
就行,一句代码就能搞定交互,挺省心的。啦,真实项目中评论数量一多,建议配合 Ajax 异步加载,不然页面容易卡。
样式部分别忘了用 position: relative
配合 left: 50%
定位线条和圆点,细节做得好,整个效果就会比较丝滑。,想要一个不复杂但看起来挺炫的评论结构,可以参考这套做法。
如果你还想找点素材参考,可以看看这几个资源:
想做点好看的评论 UI,又不想用 React 或 Vue 搞太复杂,jQuery 这套老牌选手其实还挺好用的。
下载地址
用户评论