<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>展开收缩</title> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> <style type="text/css"> *{margin: 0; padding: 0;} .show_list{padding:10px;} .sl_tip{position: relative;} .sl_tit{height: 38px;line-height:38px;border: 1px solid #d7d7d7;background: #f7f7f7;background:-moz-linear-gradient(top,#ffffff,#eae9e9);background: -webkit-linear-gradient(top, #ffffff 0%,#eae9e9 100%);padding:0 48px 0 20px;position: relative;} .sl_tit:after{content: '';position: absolute;width: 4px;height: 4px;border-radius: 50%;left:10px;top:18px;background-color: #f02f51} .sl_tit b{color: #f02f51} .sl_tit i{position: absolute;width: 38px;height: 38px;background: url(ico_down.png) no-repeat center;background-size: 60%;right:0;top:0;transition: all .3s;-webkit-transition:all .3s;} .sl_tit i.on{transform:rotate(180deg);-ms-transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);} .sl_con{position: relative;overflow: hidden;padding:10px;color: #333;line-height: 24px;display: none; border:1px solid #ddd;border-top:none;} </style> </head> <body> <div class="show_list" id="showList"> <div class="sl_tip"> <div class="sl_tit J_listTit">太喜欢莫言这段话了<b>【1】</b><i></i></div> <div class="sl_con J_listCon"> <p>当你的才华还撑不起你的野心的时候，你就应该静下心来学习；当你的能力还驾驭不了你的目标时，就应该沉下心来，历练。</p> <p>梦想，不是浮躁，而是沉淀和积累，只有拼出来的美丽，没有等出来的辉煌。</p> <p>机会永远是留给最渴望的那个人，学会与内心深处的你对话，问问自己，想要怎样的人生，静心学习，耐心沉淀。</p> <p>人，来到这世上，总会有许多的不如意，也会有许多的不公平；会有许多的失落，也会有许多的羡慕。</p> <p>你羡慕我的自由，我羡慕你的约束；你羡慕我的车，我羡慕你的房；你羡慕我的工作，我羡慕你每天总有休息时间。</p> <p>或许，我们都是远视眼，总是活在对别人的仰视里；或许，我们都是近视眼，往往忽略了身边的幸福。 </p> </div> </div> <div class="sl_tip"> <div class="sl_tit J_listTit">太喜欢莫言这段话了<b>【2】</b><i></i></div> <div class="sl_con J_listCon"> <p>事实上，大千世界，不会有两张一模一样的面孔，只要你仔细观察，总会有细微的差别。</p> <p>同是走兽，兔子娇小而青牛高大；同是飞禽，雄鹰高飞而紫燕低回。</p> <p>人，总会有智力、运气的差别；</p> <p>总会受环境、现实的约束；</p> <p>总会有人在你切一盘水果时，秒杀一道数学题；</p> <p>总会有人在你熟睡时，回想一天的得失；</p> <p>总会有人比你跑的快……</p> <p>参差不齐，才构成了这世界上一道道亮丽的风景。</p> <p>卞之琳说：你站在桥上看风景，看风景的人在楼上看你。</p> <p>是的，走在生活的风雨旅程中，当你羡慕别人住着高楼大厦时，也许瑟缩在墙角的人，正羡慕你有一座可以遮风的草屋；</p> <p>当你羡慕别人坐在豪华车里，而失意于自己在地上行走时，也许躺在病床上的人，正羡慕你还可以自由行走……</p> </div> </div> <div class="sl_tip"> <div class="sl_tit J_listTit">太喜欢莫言这段话了<b>【3】</b><i></i></div> <div class="sl_con J_listCon"> <p>有很多时候，我们往往不知道，自己在欣赏别人的时候，自己也成了别人眼中的风景。</p> <p>事实上，人生如一本厚重的书，有些书是没有主角的，因为我们忽视了自我；</p> <p>有些书是没有线索的，因为我们迷失了自我；</p> <p>有些书是没有内容的，因为我们埋没了自我……</p> <p>一生辗转千万里，莫问成败重几许。得之坦然，失之淡然。</p> <p>与其在别人的辉煌里仰望，不如亲手点亮自己的心灯，扬帆远航，把握最真实的自己，才会更深刻地解读自己……</p> <p>面向太阳吧，不问春暖花开，只求快乐面对。因为，透过洒满阳光的玻璃窗，</p> <p>蓦然回首，你何尝不是别人眼中的风景？</p> </div> </div> </div> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script> $(function(){ var showList=$('#showList'); showList.find('.J_listTit').on('click',function(){ var thisI=$(this).children('i'); if(!thisI.hasClass('on')){ showList.find('.J_listTit').children('i').removeClass('on'); showList.find('.J_listCon').hide(); thisI.addClass('on'); $("html,body").scrollTop(thisI.offset().top-10); $(this).siblings('.J_listCon').show(); }else{ thisI.removeClass('on'); $(this).siblings('.J_listCon').hide(); } }) }) </script> </body> </html>
效果如下图所示：
