JS implementation is suitable for faq or menu sliding effect examples, faqmenu

JS implementation is suitable for faq or menu sliding effect examples, faqmenu

This article provides examples of JS implementations that are suitable for faq or menu sliding. We will share this with you for your reference. The details are 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; 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: pixel PX; 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 = mo Useout; 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> <ul id = "rolin"> <li>