一多层展开菜单JS

原创 2004年11月03日 09:57:00

脚本说明:
把如下代码加入<body>区域中
<style type="text/css">
#divFoldCont {position:absolute; left:80px; top:100px; width:170px; visibility:hidden;}
.clFold   {position:absolute; width:170px;}
.clFoldSub  {position:absolute; left:15px; width:170px; visibility:hidden;}
.clFoldSub2  {position:absolute; left:15px; width:170px; visibility:hidden;}
.clFoldLinks {font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; font-weight:bold; text-decoration:none; color:black;}
.clSubLinks  {font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; font-weight:bold; text-decoration:none; color:black;}
.clSubLinks2 {font-family:Arial, Verdana, Helvetica, Helv; font-size:12px; text-decoration:none; color:black;} 
</style>
<script language="JavaScript" type="text/javascript">
function lib_bwcheck(){ //Browsercheck (needed)
 this.ver=navigator.appVersion
 this.agent=navigator.userAgent
 this.dom=document.getElementById?1:0
 this.opera5=this.agent.indexOf("Opera 5")>-1
 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
 this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
 this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
 this.ie=this.ie4||this.ie5||this.ie6
 this.mac=this.agent.indexOf("Mac")>-1
 this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
 this.ns4=(document.layers && !this.dom)?1:0;
 this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
 return this
}
var bw=new lib_bwcheck()

 


if(document.layers){ //NS4 resize fix...
 scrX= innerWidth; scrY= innerHeight;
 onresize= function(){if(scrX!= innerWidth || scrY!= innerHeight){history.go(0)} }
}

if(navigator.userAgent.indexOf('Opera')>-1 && document.getElementById){ //Opera 5 resize fix.
 scrX= innerWidth; scrY= innerHeight;
 document.onmousemove= function(){
  if(scrX<innerWidth-10 || scrY<innerHeight-10 || scrX>innerWidth+10 || scrY>innerHeight+10){
   scrX = innerWidth;
   scrY = innerHeight;
   foldInit();
  }
 };
}
/************************************************************************************
This is the new foldoutmenu, with more levels!
This is in some ways a rather advanced menu so please read every
note in this script and in the comments in the page to understand how
it works.

NOTE: if you change the position of divFoldCont from absolute to relative,
you can put the menu in a table. HOWEVER it will no longer work in netscape 4.
If you wish to support netscape 4, you have to use absolute positioning.
************************************************************************************/

//Do you want images (if not set to 0 and remove the images from the body)?
foldImg=1

//Here are the images for the top links.
foldinImg=new Image(); foldinImg.src="foldoutmenu2_arrow.gif"  //The image for the closed state.
foldoutImg=new Image(); foldoutImg.src="foldoutmenu2_arrow_open.gif" //The image for the open state.
//Here are the images for the sub links.
foldsubinImg=new Image(); foldsubinImg.src="foldoutmenu2_arrow.gif"  //The image for the "in" state.
foldsuboutImg=new Image(); foldsuboutImg.src="foldoutmenu2_arrow_open.gif" //The image for the "out" state.
//If you change the images above please remember to change the images in the actual page as well.

mainmenus=4 //How many main menus do you have?

//How many submenus do you have beneath each main level.
submenus=new Array(3,3,2,3)
//In this example I have 3 submenus in the first top menu,
//3, in the second, 2 submenus in the third top menu and 3 in the forth.
//It's really important that these numbers are correct.

pxbetweenmain = 10 //How much space should there be between the main menus
pxbetweensub = 5 //How much space should there be between the sub menus

mainstayfolded = false //Should the main menus stay folded?
substayfolded = false  //Should the sub menus stay folded?  Play with these 2 variables.


/************************************************************************************
Making cross-browser objects
************************************************************************************/
function makeMenu(obj,nest){
 nest=(!nest) ? "":'document.'+nest+'.';
    this.css= bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
 this.elm= bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
 this.ref= bw.dom || bw.ie4? document:bw.ns4?eval(nest+"document.layers." +obj+".document"):0;
 this.x= bw.ns4?this.css.left:bw.opera5?this.css.pixelLeft:this.elm.offsetLeft;
 this.y= bw.ns4?this.css.top:bw.opera5?this.css.pixelTop:this.elm.offsetTop;
 this.height= bw.ns4?this.ref.height:bw.opera5?this.css.pixelHeight:this.elm.offsetHeight;
 this.hideIt= b_hideIt;
 this.showIt= b_showIt;
 this.moveIt= b_moveIt;
 this.status= 0;
 return this;
}

// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";

function b_showIt(){this.css.visibility="visible"; this.status=1}
function b_hideIt(){this.css.visibility="hidden"; this.status=0}
function b_moveIt(x,y){this.x=x; this.y=y; /*this.css.left=this.x+px;*/ this.css.top=this.y+px;}
/************************************************************************************
Initiating the page and making the menu
************************************************************************************/
function foldInit(){
 //Fixing the browsercheck for opera... this can be removed if the browsercheck has been updated!!
 bw.opera5 = (navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?true:false
 if (bw.opera5) bw.ns6 = 0
 
 //Creating the foldoutmenu
 oFold = new Array();
 y = 0;
 for (var i=0; i<mainmenus; i++){
  oFold[i] = new makeMenu('divFold'+i,'divFoldCont');
  oFold[i].moveIt(0,y);
  oFold[i].size = oFold[i].height;
  y += oFold[i].height+pxbetweenmain;
  if (bw.ns4) oFold[i].css.clip.bottom = 500;
  oFold[i].sub = new Array();
  oFold[i].subs = top_subs;
  suby = oFold[i].height+pxbetweensub;
  for (var j=0; j<submenus[i]; j++){
   oFold[i].sub[j] = new makeMenu('divFoldSub'+i+'_'+j,'divFoldCont.document.divFold'+i);
   oFold[i].sub[j].sub = new makeMenu('divFoldSub'+i+'_'+j+'_0','divFoldCont.document.divFold'+i+'.document.divFoldSub'+i+'_'+j);
   oFold[i].sub[j].hideIt();
   oFold[i].sub[j].sub.hideIt();
   oFold[i].sub[j].moveIt(10,suby);
   suby += oFold[i].sub[j].height+pxbetweensub;
  }
 }
   oFoldCont = new makeMenu('divFoldCont');
 if (bw.ns4) oFoldCont.css.clip.bottom = 800;
   oFoldCont.showIt(); //Showing the menu when the menu have been "created"
}
/************************************************************************************
Object function to the top of the menus.
************************************************************************************/
function top_subs(show, num){
 for (var j=0; j<this.sub.length; j++){
  if (show){
   this.sub[j].showIt()
   if (foldImg) this.ref["imgFold"+num].src = foldoutImg.src
   if (substayfolded){if(this.sub[j].sub.status) this.sub[j].sub.showIt()
   }else{
    if (foldImg) this.sub[j].ref["imgFold"+num+"Sub"+j].src = foldsubinImg.src
    this.sub[j].sub.hideIt()
   }
  }else{
   this.sub[j].hideIt()
   if (foldImg) this.ref["imgFold"+num].src = foldinImg.src
   if (!substayfolded) this.sub[j].sub.hideIt()
   else if (substayfolded) this.sub[j].sub.css.visibility="hidden"
  }
 }
}
/************************************************************************************
Checking height of the menus, and moves them to the correct position.
************************************************************************************/
function checkheight(org){
 if(mainstayfolded) istart=org; else istart=0
 for(i=istart;i<oFold.length;i++){
  oFold[i].size=oFold[i].height
  for(j=0;j<oFold[i].sub.length;j++){
   oFold[i].sub[j].size=oFold[i].sub[j].height+pxbetweensub
   if(oFold[i].sub[j].status){
    oFold[i].size+=oFold[i].sub[j].size
    if(oFold[i].sub[j].sub.status){
     oFold[i].size+=oFold[i].sub[j].sub.height+pxbetweensub
     oFold[i].sub[j].size+=oFold[i].sub[j].sub.height+pxbetweensub
    }
   }
   if(j!=0) oFold[i].sub[j].moveIt(10,oFold[i].sub[j-1].y+oFold[i].sub[j-1].size)
  }
  if(i!=0) oFold[i].moveIt(0,oFold[i-1].y+oFold[i-1].size+pxbetweenmain)
 }
}
/************************************************************************************
Fold in and out the submenus.
************************************************************************************/
function subfoldmenu(main,sub){
 if (!substayfolded){
  for (var i=0; i<oFold[main].sub.length; i++){
   if (i!=sub){
    oFold[main].sub[i].sub.hideIt();
    if (foldImg) oFold[main].sub[i].ref["imgFold"+main+"Sub"+i].src = foldsubinImg.src
   }
  }
 }
 if (!oFold[main].sub[sub].sub.status){
  oFold[main].sub[sub].sub.showIt()
  if(foldImg) oFold[main].sub[sub].ref["imgFold"+main+"Sub"+sub].src = foldsuboutImg.src
 }
 else{
  oFold[main].sub[sub].sub.hideIt()
  if(foldImg) oFold[main].sub[sub].ref["imgFold"+main+"Sub"+sub].src = foldsubinImg.src
 }
 checkheight(main)
}
/************************************************************************************
Fold in and out the mainmenus
************************************************************************************/
function foldmenu(num){
 if (!mainstayfolded){
  for(var i=0; i<oFold.length; i++){
   if(i!=num) oFold[i].subs(0,i)
  }
 }
 if (!oFold[num].sub[0].status) oFold[num].subs(1,num)
 else oFold[num].subs(0,num)
 checkheight(num)
}
//Initiating the menus onload, if the browser is ok.
if(bw.bw) onload = foldInit;
</script>

<!-- Menu container -->
<div id="divFoldCont">
 <!-- Top 1 -->
 <div id="divFold0" class="clFold"><a href="#" onclick="foldmenu(0); return false" class="clFoldLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold0" width=12 height=12 alt="" border=0> [choice 0]</a><br>
  <div id="divFoldSub0_0" class="clFoldSub"><a href="#" onclick="subfoldmenu(0,0); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold0Sub0"  alt="" border=0> [choice 0_0]</a><br>
   <div id="divFoldSub0_0_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_0_0</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_0_1</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_0_2</a><br>
   </div>
  </div>
  <div id="divFoldSub0_1" class="clFoldSub"><a href="#" onclick="subfoldmenu(0,1); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold0Sub1"  alt="" border=0> [choice 0_1]</a><br>
   <div id="divFoldSub0_1_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_1_0</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_1_1</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_1_2</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_1_3</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_1_4</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_1_5</a><br>
   </div>
  </div>
  <div id="divFoldSub0_2" class="clFoldSub"><a href="#" onclick="subfoldmenu(0,2); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold0Sub2"  alt="" border=0> [choice 0_2]</a><br>
   <div id="divFoldSub0_2_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_2_0</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_2_1</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_2_2</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_2_3</a><br>
   </div>
  </div>
  
  <!-- Here's an example of how the next "submenu" will look:
  
  <div id="divFoldSub0_3" class="clFoldSub"><a href="#" onclick="subfoldmenu(0,3); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold0Sub3"  alt="" border=0> [choice 0_3]</a><br>
   <div id="divFoldSub0_3_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_3_0</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_3_1</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_3_2</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_3_3</a><br>
   </div>
  </div>
  
  Note all the numbers that are changed:
  
  divFoldSub0_CHANGED
  subfoldmenu(0,CHANGED)
  imgFold0SubCHANGED
  divFoldSub0_CHANGED_0
  
  Locate those places to see where the numbers should be increased by one each time.
  If you add more submenus be sure to change it in the submenus array as well.
  
  -->
 </div>
 <!-- Top 2 -->
 <div id="divFold1" class="clFold"><a href="#" onclick="foldmenu(1); return false" class="clFoldLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold1" width=12 height=12 alt="" border=0> [choice 1]</a><br>
  <div id="divFoldSub1_0" class="clFoldSub"><a href="#" onclick="subfoldmenu(1,0); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold1Sub0"  alt="" border=0> [choice 1_0]</a><br>
   <div id="divFoldSub1_0_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_0_0</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_0_1</a><br>
   </div>
  </div>
  <div id="divFoldSub1_1" class="clFoldSub"><a href="#" onclick="subfoldmenu(1,1); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold1Sub1"  alt="" border=0> [choice 1_1]</a><br>
   <div id="divFoldSub1_1_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_1_0</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_1_1</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_1_2</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_1_3</a><br>
   </div>
  </div>
  <div id="divFoldSub1_2" class="clFoldSub"><a href="#" onclick="subfoldmenu(1,2); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold1Sub2"  alt="" border=0> [choice 1_2]</a><br>
   <div id="divFoldSub1_2_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_2_0</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_2_1</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_2_2</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_2_3</a><br>
   </div>
  </div>
 </div>
 <!-- Top 3 -->
 <div id="divFold2" class="clFold"><a href="#" onclick="foldmenu(2); return false" class="clFoldLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold2" width=12 height=12 alt="" border=0> [choice 2]</a><br>
  <div id="divFoldSub2_0" class="clFoldSub"><a href="#" onclick="subfoldmenu(2,0); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold2Sub0"  alt="" border=0> [choice 2_0]</a><br>
   <div id="divFoldSub2_0_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 2_0_0</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 2_0_1</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 2_0_2</a><br>
   </div>
  </div>
  <div id="divFoldSub2_1" class="clFoldSub"><a href="#" onclick="subfoldmenu(2,1); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold2Sub1"  alt="" border=0> [choice 2_1]</a><br>
   <div id="divFoldSub2_1_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 2_1_0</a><br>
   </div>
  </div>
 </div>
 <div id="divFold3" class="clFold"><a href="#" onclick="foldmenu(3); return false" class="clFoldLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold3" width=12 height=12 alt="" border=0> [choice 3]</a><br>
  <div id="divFoldSub3_0" class="clFoldSub"><a href="javascript://this link doesn't have a onclick, and can be used just like a regular link" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold3Sub0"  alt="" border=0> [empty]</a>
   <div id="divFoldSub3_0_0" class="clFoldSub2"></div>
  </div>
  <div id="divFoldSub3_1" class="clFoldSub"><a href="#" onclick="subfoldmenu(3,1); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold3Sub1"  alt="" border=0> [choice 3_1]</a><br>
   <div id="divFoldSub3_1_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_1_0</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_1_1</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_1_2</a><br>
   </div>
  </div>
  <div id="divFoldSub3_2" class="clFoldSub"><a href="#" onclick="subfoldmenu(3,2); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold3Sub2"  alt="" border=0> [choice 3_2]</a><br>
   <div id="divFoldSub3_2_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_2_0</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_2_1</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_2_2</a><br>
     <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_2_3</a><br>
   </div>
  </div>
 </div>
 
<!--
 Here's how it would look if we added one more top menu.
 (in this case a top menu with one sublevel.
 
 
 <div id="divFold4" class="clFold"><a href="#" onclick="foldmenu(4); return false" class="clFoldLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold4" width=12 height=12 alt="" border=0> [choice 4]</a><br>
  <div id="divFoldSub4_0" class="clFoldSub"><a href="#" onclick="subfoldmenu(4,0); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold4Sub0"  alt="" border=0> [choice 4_0]</a><br>
   <div id="divFoldSub4_0_0" class="clFoldSub2">
    <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 4_0_0</a><br>
   </div>
  </div>
 </div> 
 
 Note all the places the numbers changed:
 
 divFoldCHANGED
 foldmenu(CHANGED)
 imgFoldCHANGED
 divFoldSubCHANGED_0
 subfoldmenu(CHANGED,0)
 imgFoldCHANGEDSub0
 divFoldSubCHANGED_0_0
 
 Locate those places to see where the numbers should be increased by one each time.
 If you add more topmenus be sure to change the "mainmenus" variable
 and add it in the "submenus" array.
--> 
</div>

最简单的纯js实现点击展开二级菜单功能

虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有很多限制,比如项目组奇葩的要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟100+KB对与小型项目来说还是非常大的。我最近就遇到做...
  • well2049
  • well2049
  • 2017年05月16日 08:39
  • 1043

js实现菜单的收起和展开

菜单的收起和展开 ul{ list-style-type: none; } #cityList1{ display: none; } #cityList2{ display: no...
  • pangqiandou
  • pangqiandou
  • 2017年10月16日 23:08
  • 572

多层展开菜单

脚本说明:把如下代码加入区域中#divFoldCont {position:absolute; left:80px; top:100px; width:170px; visibility:hidden...
  • zss1100
  • zss1100
  • 2007年01月13日 14:31
  • 573

Android实现树状多层可展开收起ListView

最近项目用到树状ListView,要可展开收起。Android自带的ExpandableListView不太适合扩展,看了网上一些实现,发现通用性不是很好,于是参考可取之处,自己写了一个比较通过的实现...
  • fszeng2011
  • fszeng2011
  • 2017年10月21日 08:40
  • 157

JS之三级竖向展开/收缩导航菜单

JS之三级竖向展开/收缩导航菜单
  • netuser1937
  • netuser1937
  • 2017年02月07日 16:45
  • 730

js点击子菜单折叠,再点击子菜单展开

home_work_2                               function f(str){                 var sub_menu = docume...
  • qq_32914323
  • qq_32914323
  • 2016年02月23日 13:06
  • 1482

js展开菜单效果(一)

前言: 废话不多说了,内容很简单。一个是点击展开效果,一个是展示广告然后定时关闭效果。后续写一个JD的二级菜单展示。 ...
  • my_coding2015
  • my_coding2015
  • 2016年09月11日 16:08
  • 207

js多级菜单样式

-----------------------------------------------------------------------index.html http://www.w3.org...
  • fengxinzi_jing
  • fengxinzi_jing
  • 2013年03月15日 16:27
  • 1457

js实现菜单的收缩与展开

tab.js中的菜单收缩与展开函数function showx(type_) { var flag=document.getElementById('div_menu_'+(type_+1...
  • lihongjiao
  • lihongjiao
  • 2012年01月11日 15:58
  • 2049

js实现侧边导航栏展开和折叠

效果:左侧导航栏,点击展开,显示子菜单。再次点击,菜单折叠。 代码: ...
  • liuwengai
  • liuwengai
  • 2016年06月09日 18:01
  • 4490
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一多层展开菜单JS
举报原因:
原因补充:

(最多只允许输入30个字)