<!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>纵向可折叠的时光轴</title> <link href="https://www.jb51.net/css/history.css" /> </head> <body> <!-- 代码 开始 --> <div> <div> <div> <ul> <li>生活轨迹</li> </ul> </div> </div> </div> <div> <div> <div> <ul> <h2><a href="#nogo">出入口系统</a></h2> <li> <h3><span>20170120 22:32:45</span></h3> <dl> <dt><a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::">出入口系统</a><span>离开小区</span></dt> </dl> </li> <li> <h3><span>20170120 21:46:30</span></h3> <dl> <dt><a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::">出入口系统</a><span>进入小区</span></dt> </dl> </li> </ul> </div> <div> <ul> <h2><a href="#nogo">停车场系统</a></h2> <li> <h3><span>20170120 19:15:00</span></h3> <dl> <dt><a href="f?p='||V('APP_ID')||':130:'||V('SESSION')||':::::">停车场系统</a><span>豫A4NE60</span></dt> </dl> </li> <li> <h3><span>20170120 17:23:40</span></h3> <dl> <dt><a href="f?p='||V('APP_ID')||':130:'||V('SESSION')||':::::">停车场系统</a><span>豫A4NE60</span></dt> </dl> </li> </ul> </div> <div> <ul> <h2><a href="#nogo">楼宇门禁系统</a></h2> <li> <h3><span>20170120 15:37:23</span></h3> <dl> <dt><a href="f?p='||V('APP_ID')||':27:'||V('SESSION')||':::::">楼宇门禁系统</a><span>1#2-205</span></dt> </dl> </li> <li> <h3>20170120 13:21:15</h3> <dl> <dt><a href="f?p='||V('APP_ID')||':27:'||V('SESSION')||':::::">楼宇门禁系统</a><span>1#2-205</span></dt> </dl> </li> </ul> </div> </div> </div> <script type="text/javascript" src="https://www.jb51.net/js/jquery.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/main.js"></script> </body> </html>
4、运行效果：
四、横向时间轴
1、js文件（jquery.js和jquery.timelinr-0.9.5.3.js）
（1）jquery.timelinr-0.9.5.3.js文件