JS implementation of the appropriate to do FAQ or menu sliding effect sample _javascript tips

This article describes the JS implementation of the appropriate to do FAQ or menu sliding effect. Share to everyone for your reference, specific as follows:

<! CTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dt-- > <meta http-equiv= "content-type" content= "text/html; Charset=utf-8 "/> <style type=" Text/css "> <!--body,div,ul,li,p,h1,h2{margin:0; padding:0; Background: #FAFAFA; Font-family:arial, Helvetica, Sans-serif, "Arial"} 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; Paddin g-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 ();}}
The 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 = SE
Tinterval (move,10); function Hiddens () {head.style.borderBottom = ' none '; head.onmouseout = mouseout; Head.onmouseout (); Content.style.dis
Play = "None";
IsOpen = false;
State.hidden = false; function Move () {var dist = (Tarh-content.style.height.pxtonum ()) *speed; if (Math.Abs (dist) < 1) dist = dist > 2}
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 = obj.firstchild; while (!result.tagname) {result = result.nextsibling;}
return result; function Getnextchild (obj) {var result = Obj.nextsibling while (!result.tagname) {result = result.nextsibling;} retu
RN result; //]]> </script> <ul id= "Rolin" > <li>  

More readers interested in JavaScript-related content can view the site topics: "JavaScript switching effects and tips summary", "JavaScript Search Algorithm Skills Summary", "JavaScript animation effects and tips summary", " JavaScript error and debugging skills Summary, JavaScript data structure and algorithm skills summary, JavaScript traversal algorithm and skills summary and JavaScript mathematical calculation usage Summary

I hope this article will help you with JavaScript programming.