Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns="http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Js vertical foldable CSS sliding menu</title> </pead> <style type="text/css"> <!-- body,div,ul,li,p,h1,h2{ margin:0; padding:0; border:0; background:#FAFAFA; font-family:Arial, Helvetica, sans-serif,"宋体"} body{ text-align:center; font-size:12px} li{ list-style:none} .rolinList{ width:402px; height:auto; margin:20px auto 0 auto; text-align:left} .rolinList li{margin-bottom:1px;border:1px solid #DADADA} .rolinList li h2{ width:380px; height:40px; background:#fff; font-size:14px; line-height:40px; padding-left:20px; color:#333; cursor:pointer} .content{ height:150px;width:400px; background:#fff; background:#FAFAFA} .content p{ margin:12px} --> </style> <script type="text/javascript">//<![CDATA[ window.onload = function() { rolinTab("rolin") } function rolinTab(obj) { var list = $(obj).getElementsByTagName("LI"); var state = {show:false,hidden:false,showObj:false}; for (var i=0; i<list.length; i++) { var tmp = new rolinItem(list[i],state); if (i == 0) tmp.pShow(); } } function rolinItem(obj,state) { var speed = 0.0666; var range = 1; var interval; var tarH; var tar = this; var head = getFirstChild(obj); var content = getNextChild(head); var isOpen = false; this.pHidden = function() { if (isOpen) hidden(); } this.pShow = show; var baseH = content.offsetHeight; content.style.display = "none"; var isOpen = false; head.onmouseover = function() { this.style.background = "#EFEFEF"; } head.onmouseout = mouseout; head.onclick = function() { this.style.background = "#EFEFEF"; if (!state.show && !state.hidden) { if (!isOpen) { head.onmouseout = null; show(); } else { hidden(); } } } function mouseout() { this.style.background = "#FFF" } function show() { head.style.borderBottom = "1px solid #DADADA"; state.show = true; if (state.openObj && state.openObj != tar ) { state.openObj.pHidden(); } content.style.height = "0px"; content.style.display = "block"; content.style.overflow = "hidden"; state.openObj = tar; tarH = baseH; interval = setInterval(move,10); } function showS() { isOpen = true; state.show = false; } function hidden() { state.hidden = true; tarH = 0; interval = setInterval(move,10); } function hiddenS() { head.style.borderBottom = "none"; head.onmouseout = mouseout; head.onmouseout(); content.style.display = "none"; isOpen = false; state.hidden = false; } function move() { var dist = (tarH - content.style.height.pxToNum())*speed; if (Math.abs(dist) < 1) dist = dist >0? 1:-1; content. style. height = (content. style. height. pxToNum () + dist) + "px"; if (Math. abs (content. style. height. pxToNum ()-tarH) <= range) {clearInterval (interval); content. style. height = tarH + "px"; if (tarH! = 0) {showS ()} else {hiddenS () ;}}}var $ = function ($) {return document. getElementById ($)}; String. prototype. pxToNum = function () {return Number (this. replace ("px", "")} function getFirstChild (obj) {var result = obj. firstChild; while (! Result. tagName) {result = result. nextSibling;} return result;} function getNextChild (obj) {var result = obj. nextSibling; while (! Result. tagName) {result = result. nextSibling;} return result;} //]></script> <body> <ul class="rolinList" id="rolin"> <li> <p>Tang Dynasty imperial master</p> <div class="content"><p>Lijian moon appreciation melancholy, armband knives, clothing and Frome, proud fog pills, hand-carried support.<br />I am looking for the emperor's mausoleum in the final stage. I have no shadow, but the dead are full of posts.<br />Xu FA Cang, Qi Xuang, three feet Silver Wolf, broken wind<br />Hold the ghost gun and drink the blood of tigers. Only a thousand years of my hometown! Www.111cn.net</p></div> </li> <li> <p>Female shooting</p> <div class="content"><p>Once upon a time, there was a dream: to ride the rivers and lakes, and to entertain your enemies.<br />I once had a wish: a thousand miles of fierce pursuit, ten steps of blood splash.<br />Once there was a sense of pride: Qi gonggaishi, named Guan Wulin.<br />There was a kind of expectation: the candle shadows were red and the sleeves were fragrant.</p></div> </li> <li> <p>Black sand rigid body</p> <div class="content"><p>Zhao Ke, Hu Yu, Wu LuShuang, Xueming. The silver saddle is like a white horse.<br />One person is killed in ten steps, leaving a thousand miles away. It's time to go and hide your name.<br />Take the Shiling drink and take off your knees. Zhu Hai will be eager to persuade Hou Chen.<br />Three Cups of vomit ranino, Wuyue is light. After the eyes and ears are hot, Yi Weisheng.<br />The death of the chivalrous bone fragrance, not to mention the world's English. Who can write your book, Bai shoutai Xuan Jing.</p> </div> </li> <li> <p>ASP Source Code Download</p> <div class="content">Please come here ......</div> </li> <li> <p>Smog</p> <div class="content"><p>Shoot shadow is good, such as magic, its skin passes through the world, and its out-of-the-art reproduction,<br />Who is chasing it in the shoryang road...</p> </div> </li> </ul> </body> </ptml></td> </tr></table>
Tip: you can modify some code before running
