Here, we use native javascript to create an easy-to-maintain and easy-to-use sliding menu in an object-oriented way. The Calling method is as follows:
Copy codeThe Code is as follows: var $ sliding = document. getElementById ("silding ");
Var s1 = new Sliding ();
S1.commands = $ sliding. getElementsByTagName ("dt ");
S1.panels = $ sliding. getElementsByTagName ("dd ");;
S1.init ("mouseover", "active ");
The Demo code is divided into two files: slide.js and slide.html.
Slide.htm:Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> javascript slide control demonstration </title>
<Style type = "text/css">
/* Reset */
Dl, ul, li, dt, dd {margin: 0; padding: 0; list-style: none ;}
/* Silding */
. Silding {width: 200px; border: 1px solid # ccc; line-height: 25px; overflow: hidden ;}
. Silding dt {border-bottom: 1px solid # ccc; background-color: # bebebe; cursor: pointer}
. Silding dd {display: none; background: # efefef; overflow: hidden; font-size: 12px ;}
. Silding. active {font-weight: bold ;}
</Style>
<Script type = "text/javascript" src = "slide. js"> </script>
</Head>
<Body>
<Div id = "silding" class = "silding">
<Dl>
<Dt class = "active"> first level menu </dt>
<Dd style = "display: block;">
<Ul>
<Li> <a href = "#"> first level-2 menu </a> </li>
<Li> first level-2 menu </li>
<Li> first level-2 menu </li>
</Ul>
</Dd>
</Dl>
<Dl>
<Dt> second level-1 menu </dt>
<Dd>
<Ul>
<Li> Second Level-2 menu </li>
<Li> Second Level-2 menu </li>
<Li> Second Level-2 menu </li>
</Ul>
</Dd>
</Dl>
<Dl>
<Dt> third level-1 menu </dt>
<Dd>
<Ul>
<Li> third level-2 menu </li>
<Li> third level-2 menu </li>
<Li> third level-2 menu </li>
</Ul>
</Dd>
</Dl>
</Div>
<Script type = "text/javascript">
Var $ sliding = document. getElementById ("silding ");
Var s1 = new Sliding ();
S1.commands = $ sliding. getElementsByTagName ("dt ");
S1.panels = $ sliding. getElementsByTagName ("dd ");;
S1.init ("mouseover", "active ");
</Script>
</Body>
</Html>
Slide. js:Copy codeThe Code is as follows: function Slider (I, panelHeight) {// dto
This. index = I;
This. panelHeight = panelHeight;
}
// Class Sliding {
Function Sliding (activeIndex ){
This. commands = [];
This. panels = [];
This. activeIndex = activeIndex | 0;
This. sliderCache = {};
}
Sliding. prototype = {
// Bind events
Init: function (eventName, activeCssClass ){
Var _ this = this;
Var cmds = _ this. commands;
_ This. activeClass = activeCssClass;
For (var I = 0, n = cmds. length; I <n; I ++ ){
Cmds [I] ["on" + eventName] = function (e ){
_ This. handel (this, e );
}
Cmds [I]. index = I;
If (I = _ this. activeIndex ){
_ This. sliderCache = new Slider (I, _ this. panels [I]. offsetHeight );
}
}
},
// Event processing functions
Handel: function (elem, args ){
Var _ this = this;
Var index = elem. index;
Var cacheIndex = _ this. sliderCache. index;
Var cacheElem = _ this. commands [cacheIndex];
If (index = cacheIndex) return;
Var showPanel = _ this. panels [index];
Var hidePanel = _ this. panels [cacheIndex];
Var h = parseInt (_ this. sliderCache. panelHeight );
ShowPanel. style. height = "0px ";
ShowPanel. style. display = "block ";
_ This. tween (hidePanel, showPanel, h );
Elem. className = _ this. activeClass;
CacheElem. className = cacheElem. className. replace (eval ("/? "+ _ This. activeClass + "? /"),"");
_ This. sliderCache = new Slider (index, h );
},
// Animation algorithm
Tween: function (obj0, obj1, h ){
_ This = arguments. callee;
Var step = 20;
If ("\ v" = "v "){
Step = 30;
}
If (h> 0 ){
Var h0 = obj0.offsetHeight;
Var h1 = obj1.offsetHeight;
If (h <step ){
Obj0.style. display = "none ";
Obj0.style. height = (h1 + h) + "px ";
Obj1.style. height = (h1 + h) + "px ";
} Else {
H = h-step;
Obj0.style. height = (h0-step) + "px ";
Obj1.style. height = (h1 + step) + "px ";
SetTimeout (function (){
_ This (obj0, obj1, h)
},
50)
}
}
}
}
//}
All the above Code is shown here, because it is a demonstration, html css is simplified as much as possible. In addition, the fn of jquery is used. slideUp fn. slideDown is easier to implement, but as a professional developer, I am very helpful to learn more about native JS.