效果图：
本次制作要点：
html：
结构上，要把li内部的文字和待展开的元素分开来，便于后期样式上的把控和逻辑上的处理。
1 <div class="sidebar-list"> 2 <ul class="first-class"> 3 <li class="first-class-li cur"><a href="javascript:;"><i class="icon icon-activity"></i>个人报表</a> 4 <ul class="sec-class" style="display:block;"> 5 <li class="sec-class-li cur"><a href="javascript:;"><i class="icon icon-order"></i>今日报表</a> 6 <ul class="thr-class" style="display:block;"> 7 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表标题</a></li> 8 <li class="thr-class-li cur"><a href="javascript:;"><i class="icon icon-document"></i>报表内容</a></li> 9 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表审核</a></li> 10 </ul> 11 </li> 12 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-order"></i>历史报表</a> 13 <ul class="thr-class"> 14 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表标题</a></li> 15 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表内容</a></li> 16 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表审核</a></li> 17 </ul> 18 </li> 19 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-order"></i>计划报表</a> 20 <ul class="thr-class"> 21 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表标题</a></li> 22 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表内容</a></li> 23 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表审核</a></li> 24 </ul> 25 </li> 26 </ul> 27 </li> 28 <li class="first-class-li"><a href="javascript:;"><i class="icon icon-collection"></i>个人收藏</a> 29 <ul class="sec-class"> 30 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-select"></i>报表收藏</a> 31 <ul class="thr-class"> 32 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏链接</a></li> 33 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏标题</a></li> 34 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏内容</a></li> 35 </ul> 36 </li> 37 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-select"></i>图片收藏</a> 38 <ul class="thr-class"> 39 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏链接</a></li> 40 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏标题</a></li> 41 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏内容</a></li> 42 </ul> 43 </li> 44 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-select"></i>账户收藏</a> 45 <ul class="thr-class"> 46 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏链接</a></li> 47 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏标题</a></li> 48 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏内容</a></li> 49 </ul> 50 </li> 51 </ul> 52 </li> 53 <li class="first-class-li"><a href="javascript:;"><i class="icon icon-share"></i>我的分享</a> 54 <ul class="sec-class"> 55 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-praise"></i>朋友圈分享</a> 56 <ul class="thr-class"> 57 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-task"></i>报表分享</a></li> 58 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-picture"></i>图片分享</a></li> 59 </ul> 60 </li> 61 </ul> 62 </li> 63 <li class="first-class-li"><a href="javascript:;"><i class="icon icon-picture"></i>图库</a> 64 <ul class="sec-class"> 65 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-computer"></i>本机</a> 66 <ul class="thr-class"> 67 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-camera"></i>相机照片</a></li> 68 </ul> 69 </li> 70 </ul> 71 </li> 72 <li class="first-class-li"><a href="javascript:;"><i class="icon icon-dynamic"></i>成长记录</a> 73 <ul class="sec-class"> 74 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-barrage"></i>历史记录</a> 75 </li> 76 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-createtask"></i>任务记录</a> 77 </li> 78 </ul> 79 </li> 80 <li class="first-class-li"><a href="javascript:;"><i class="icon icon-coupons"></i>账户信息</a> 81 <ul class="sec-class"> 82 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-workbench"></i>客户端信息</a> 83 <ul class="thr-class"> 84 <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-editor"></i>修改信息</a></li> 85 </ul> 86 </li> 87 </ul> 88 </li> 89 </ul> 90 </div>