一多层展开菜单JS

最新推荐文章于 2023-02-04 18:37:18 发布
最新推荐文章于 2023-02-04 18:37:18 发布
阅读量1.7k 收藏
点赞数
分类专栏： Web技术 Web编程 文章标签： class border div function numbers image
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/3cts/article/details/164820
版权

脚本说明:
把如下代码加入<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;
 οnresize= 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.οnmοusemοve= 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="#" οnclick="foldmenu(0); return false" class="clFoldLinks" οnfοcus="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="#" οnclick="subfoldmenu(0,0); return false" class="clSubLinks" οnfοcus="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" οnfοcus="if(this.blur)this.blur()">Sub 0_0_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_0_1</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_0_2</a><br>
   </div>
  </div>
  <div id="divFoldSub0_1" class="clFoldSub"><a href="#" οnclick="subfoldmenu(0,1); return false" class="clSubLinks" οnfοcus="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" οnfοcus="if(this.blur)this.blur()">Sub 0_1_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_1_1</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_1_2</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_1_3</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_1_4</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_1_5</a><br>
   </div>
  </div>
  <div id="divFoldSub0_2" class="clFoldSub"><a href="#" οnclick="subfoldmenu(0,2); return false" class="clSubLinks" οnfοcus="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" οnfοcus="if(this.blur)this.blur()">Sub 0_2_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_2_1</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_2_2</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="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="#" οnclick="subfoldmenu(0,3); return false" class="clSubLinks" οnfοcus="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" οnfοcus="if(this.blur)this.blur()">Sub 0_3_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_3_1</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_3_2</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="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="#" οnclick="foldmenu(1); return false" class="clFoldLinks" οnfοcus="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="#" οnclick="subfoldmenu(1,0); return false" class="clSubLinks" οnfοcus="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" οnfοcus="if(this.blur)this.blur()">Sub 1_0_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 1_0_1</a><br>
   </div>
  </div>
  <div id="divFoldSub1_1" class="clFoldSub"><a href="#" οnclick="subfoldmenu(1,1); return false" class="clSubLinks" οnfοcus="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" οnfοcus="if(this.blur)this.blur()">Sub 1_1_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 1_1_1</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 1_1_2</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 1_1_3</a><br>
   </div>
  </div>
  <div id="divFoldSub1_2" class="clFoldSub"><a href="#" οnclick="subfoldmenu(1,2); return false" class="clSubLinks" οnfοcus="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" οnfοcus="if(this.blur)this.blur()">Sub 1_2_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 1_2_1</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 1_2_2</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 1_2_3</a><br>
   </div>
  </div>
 </div>
 <!-- Top 3 -->
 <div id="divFold2" class="clFold"><a href="#" οnclick="foldmenu(2); return false" class="clFoldLinks" οnfοcus="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="#" οnclick="subfoldmenu(2,0); return false" class="clSubLinks" οnfοcus="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" οnfοcus="if(this.blur)this.blur()">Sub 2_0_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 2_0_1</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 2_0_2</a><br>
   </div>
  </div>
  <div id="divFoldSub2_1" class="clFoldSub"><a href="#" οnclick="subfoldmenu(2,1); return false" class="clSubLinks" οnfοcus="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" οnfοcus="if(this.blur)this.blur()">Sub 2_1_0</a><br>
   </div>
  </div>
 </div>
 <div id="divFold3" class="clFold"><a href="#" οnclick="foldmenu(3); return false" class="clFoldLinks" οnfοcus="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" οnfοcus="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="#" οnclick="subfoldmenu(3,1); return false" class="clSubLinks" οnfοcus="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" οnfοcus="if(this.blur)this.blur()">Sub 3_1_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 3_1_1</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 3_1_2</a><br>
   </div>
  </div>
  <div id="divFoldSub3_2" class="clFoldSub"><a href="#" οnclick="subfoldmenu(3,2); return false" class="clSubLinks" οnfοcus="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" οnfοcus="if(this.blur)this.blur()">Sub 3_2_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 3_2_1</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 3_2_2</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="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="#" οnclick="foldmenu(4); return false" class="clFoldLinks" οnfοcus="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="#" οnclick="subfoldmenu(4,0); return false" class="clSubLinks" οnfοcus="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" οnfοcus="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>

3cts
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
下拉多层展开菜单.rar
12-29
下拉多层展开菜单.rar下拉多层展开菜单.rar下拉多层展开菜单.rar下拉多层展开菜单.rar下拉多层展开菜单.rar下拉多层展开菜单.rar
vue + element UI NavMenu多级菜单 只保持一个子菜单的展开
热门推荐
weixin_33843409的博客
04-12 1万+
本文章为三级目录菜单处理（可根据自己需求调整）本文章适用于已熟悉element NavMenu控件及vue的伙伴1、dom 结构 2、数据结构及方法 方法：下面代码中有部分是处理全局路由状态的，我这边是每个页面需要显示当前页面title，如果不需要显示的可以忽略其他方法，主要看onMenu方法就可以了onMenu方法调用在了:defaul...
多层展开菜单，基于Bootstrap布局
mengs
02-07 622
多层展开菜单，基于Bootstrap布局 教程地址：原文地址（YouTube） B站教程：原文转载（bilibili） 两个视频的内容相同，第二个为转载 效果图 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KVJX4gpb-1581039558258)(演示.gif)] 代码区 html <div class="container"> <...
Sprintboot Java 实现多层级菜单的读取和解析#导航菜单权限#Springboot
jingjiaohuan的博客
02-04 1077
记录开发过程中的经验总结。实现一个简单的菜单分级
关于项目中出现的多层级菜单的实现方法
zb201666的博客
05-27 2009
关于项目中出现的多层级菜单的实现方法 在项目开发中，经常会有多层级菜单的功能需求需要实现，实现多层级菜单一般都是采取递归的方式进行逐级遍历，但是这种方式存在明显的不足，就是当层级关系比较深时，通过父级去递归对应的子级，子级去递归自己的子级时，如果涉及到数据库的查询，那么就会多次发送SQL查询语句去数据库查询，造成数据库访问剧增，严重影响系统功能的响应速度，造成不好的用户体验。这里，我给大家介绍一种...
Ext JS 后端数据树之多层级节点自动展开失败问题分析与解决
oscar999的专栏
10-11 451
通过设置节点的expanded 为true 会自动调用后端接口并展出下一级， 但是在实际开发中发现： 如果树的数据量较大， 展开的层级大于1级， 则会出现第二层节点无法展出的状况， 通过Chrome 的控制台可以看到如下错误：
vue+elementui实现多层树形菜单
10-16
一个完整的树形菜单demo，下载即可运行，包含node_module包，使用vue+el-menu完成多层树形菜单。内含模拟数据格式。
js多层联动下拉框菜单
07-26
不管数据源是什么，也不管是ASP，JSP，PHP，。NET，只要给传一个符合格式的JS数组就行了. js多层联动下拉框菜单
JavaScript实现下拉菜单的显示和隐藏
11-26
我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏。使用JavaScript方法实现我们需要用的知识有： 1)JS事件：onmouseover鼠标经过事件和onmouseout鼠标离开事件。 2)JS基础语法：使用function关键字定义函数。 ...
微信小程序多层展开/收起列表
03-29
看到一个需求，对一些前端小白或者刚开始写小程序的人来说，可能会有点帮助，效果如下： (此图片来源于网络，如有侵权，请联系删除! )   就是以上效果，废话不多说，上代码 wxml: <view class='list_name_...
单片机多级菜单程序
01-19
本菜单程序采用结构体及指针设计,可方便实现移值,修改
多层顶级菜单
04-13
多层顶级菜单，并用SetMenu在顶级菜单中切换
sqlite3数据库操作类
04-23
本工程自带许多测试实例； 本程序可编译成可执行文件，直接运行代码进行测试；并可以选择运行模式进入灵活的循环可执行模式，通过命令行交互方式进行数据库操作； 此类集成了许多数据库常用操作和一些不常用操作的方法和实例(包括blob数据类型的操作，此blob类型的读写不限于单个读写，可自由灵活的操作多个blob字段)；本程序为本人对sqlite3的包装，目的在于更方便的调用数据库操作等; 本程序采用C++进行封装（注释详细），将数据库的一些操作封装成类的形式； 并用C语言格式导出C接口供C语言的调用； 即本程序是C语言、C++兼容 本程序所使用的Makefile文件由本人创作（注释详细），可支持动态库编译、静态库编译等等，经过长时间优化积累，可通过简单修改参数适用于绝大部分应用场景。 本程序的调试输出使用的是本人自创的debug接口，以库的形式形成依赖，线程安全，以后会找机会包装上传此类源代码; 本程序可兼容linux以及windows环境，本人的运行环境在Linux，也试过在windows环境可编译运行。
jQuery多级折叠菜单
06-13
jQuery多级折叠菜单，有例子
jsp 很实用的JS+CSS多级树形展开菜单_网页代码
07-11
jsp 很实用的JS+CSS多级树形展开菜单_网页代码
关于Tomcat: The value for the useBean class attribute is invalid 问题的另类解释
无轩居 (Home of vip)
05-31 7744
关于Tomcat: The value for the useBean class attribute is invalid 问题大家,或者说高高手通常给的就是如下的解释http://groups.google.com/group/programmercafe/browse_thread/thread/379cf84cd4615203/eeb1f45e2d79bc32但是我本人比较白痴
【vue】element 的el-table，数据刷新，但表格不刷新 终极解决方案
无轩居 (Home of vip)
03-06 7735
vue 2.x 的elment ui this.tableData.splice(1.0) 强制它更新一下就可以了。 要不要，你就算主动去getdata，它也不会更新
vue element ui el_upload 一直报跨域问题的解决办法。
无轩居 (Home of vip)
04-25 4438
这几天用 element ui 做后台上传文件的时候。 本来做得好好的。。。 结果 在设置多行传文件的时候，一直 跨域问题。 我就纳闷了，我后端我已经设置了可以跨域问题啊。 而且这个上传路径，还是同一个后端的不同目录罢了。 其他地址都好好的呀。 怎么会一直报跨域呢？ 真的是百度了二天，一直没解决， 然后最后只好把好的那部分代码和坏的那部分代码一行一行对比 最后发现和前端代码无关。 因为我切换到正常...
在ASP中实现RsA加密与解密
无轩居 (Home of vip)
01-17 4267
本文章有两文件组成test.asp 测试演示文件clsrsa.asp 实现rsa加密与解密的vbs类文件下面是代码: 1. test.asprem 文章标题:在asp中通过vbs类实现rsa加密与解密rem 收集整理:yanekrem 联系:[email protected]%>Dim LngKeyEDim LngKeyDDim LngKeyNDim StrMessageDim Ob
script多层级菜单
最新发布
05-24
实现多层级菜单可以使用递归函数来实现。具体步骤如下： 1. 定义一个字典，用于存储菜单数据，其中每个菜单项都是一个字典，包含菜单名称和子菜单项。 2. 编写一个递归函数，用于遍历菜单数据并打印菜单。 3. 在递归函数中，首先打印当前菜单项的名称，并判断是否有子菜单项。如果有，就递归调用该函数，并将子菜单项作为参数传递给该函数。 4. 在递归函数中，需要添加一个缩进，以便区分菜单项的级别。 下面是一个示例代码： ```python menu_data = { 'File': { 'New': None, 'Open': None, 'Save': None, 'Save As': None, 'Close': None, }, 'Edit': { 'Cut': None, 'Copy': None, 'Paste': None, 'Delete': None, }, 'View': { 'Zoom In': None, 'Zoom Out': None, 'Full Screen': None, }, } def print_menu(menu, indent=0): for item in menu: if menu[item] is not None: print(' ' * indent + item) print_menu(menu[item], indent+4) else: print(' ' * indent + item) print_menu(menu_data) ``` 运行以上代码，将会输出如下结果： ``` File New Open Save Save As Close Edit Cut Copy Paste Delete View Zoom In Zoom Out Full Screen ``` 注意，以上代码只是一个示例，实际应用中需要根据具体需求进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

3cts

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值