<head>
<script language="JavaScript1.2">//菜单1的内容var menu1=new Array()menu1[0]='<a href=../../../../www.163.net>网易</a><br>'menu1[1]='<a href=../../../../www.sina.com.cn>新浪网</a><br>'menu1[2]='<a href=../../../../www.cctv.com>中央电视台</a><br>'//菜单2的内容var menu2=new Array()menu2[0]='<a href= http://smallrain2000.yeah.net>小雨在线</a><br>'menu2[1]='<a href= http://www.gzwsr.com/gz_book/guestbook.asp?user=liuliu24>给我留言</a><br>'menu2[2]='<a href=mailto:[email protected]>来信联络</a><br>'</script><style><!--.iewrap1{position:relativeheight:30pxfont-family: "宋体"font-size: 9pt}.iewrap2{position:absolutefont-family: "宋体"font-size: 9pt}#dropmenu0, #dropmenu1{visibility:hidez-index:100}#dropmenu0 { font-family: "宋体" font-size: 9pt}#dropmenu1 { font-family: "宋体" font-size: 9pt}--></style></head><body><script language="JavaScript1.2">//以下不要改var zindex=100function dropit2(whichone){if (window.themenu&&themenu.id!=whichone.id)themenu.style.visibility="hidden"themenu=whichoneif (document.all){themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetXthemenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18if (themenu.style.visibility=="hidden"){themenu.style.visibility="visible"themenu.style.zIndex=zindex++}else{hidemenu()}}} function dropit(e,whichone){if (window.themenu&&themenu.id!=eval(whichone).id)themenu.visibility="hide"themenu=eval(whichone)if (themenu.visibility=="hide")themenu.visibility="show"elsethemenu.visibility="hide"themenu.zIndex++themenu.left=e.pageX-e.layerXthemenu.top=e.pageY-e.layerY+19return false} function hidemenu(whichone){if (window.themenu)themenu.style.visibility="hidden"} function hidemenu2(){themenu.visibility="hide"} if (document.all)document.body.onclick=hidemenu //以上不要改</script><!----------菜单1开始----------><ilayer height=35px><layer visibility=show><span class=iewrap1><span class=iewrap2 onClick="dropit2(dropmenu0)event.cancelBubble=truereturn false"><font face=宋体><a href="#" onClick="if(document.layers) return dropit(event, 'document.dropmenu0')">站点列表</a></font></span></span></layer></ilayer><br><!----------菜单1结束----------><!----------菜单2开始----------><ilayer height=35px><layer visibility=show><span class=iewrap1><span class=iewrap2 onClick="dropit2(dropmenu1)event.cancelBubble=truereturn false"><font face=宋体><a href="#" onClick="if(document.layers) return dropit(event, 'document.dropmenu1')">联络方式</a></font></span></span></layer></ilayer><br><!----------菜单2结束----------><div id=dropmenu0 style="position:absoluteleft:0top:0layer-background-color:#de9edebackground-color:#de9edewidth:80visibility:hiddenborder:1px solid blackpadding:0px"><script language="JavaScript1.2">if (document.all)dropmenu0.style.padding="4px"for (i=0i<menu1.lengthi++)document.write(menu1[i])</script></div><script language="JavaScript1.2">if (document.layers){document.dropmenu0.captureEvents(Event.CLICK)document.dropmenu0.onclick=hidemenu2}</script><div id=dropmenu1 style="position:absoluteleft:0top:0layer-background-color:#de9edebackground-color:#de9edewidth:80visibility:hiddenborder:1px solid blackpadding:0px"><script language="JavaScript1.2">if (document.all)dropmenu1.style.padding="4px"for (i=0i<menu2.lengthi++)document.write(menu2[i])</script></div><script language="JavaScript1.2">if (document.layers){document.dropmenu1.captureEvents(Event.CLICK)document.dropmenu1.onclick=hidemenu2}</script>
</body>
</html>
本人还有几个，以上供参考！
在element-ui中采用NavMenu导航菜单作为系统菜单的实现。
官方文档中NavMenu导航菜单有一个Menu Attributes属性collapse，是一个 bollean 类型，用于控制是否水平折叠菜单。
我们可以通过设置collapse属性的值为 true 或 false 来控制菜单的折叠与展开。
解决方案
1.实现一个按钮，
2.在data中定义一个数据collapse
3.实现方法toggleCollapse
4.在el-menu中动态绑定属性值collapse
问题：在左侧菜单的展开与折叠中，文本和图标折叠了，但是菜单的长度并没有折叠，发现原因是菜单的长度给了一个固定的值，而实际上我们需要动态给定长度。如果菜单是展开的，长度是等于文本的长度+图标的长度。如果菜单是折叠的，长度是等于图标的长度。我们可以根据isCollapse的值进行判断，通过它的值为true或者是false，来给定不同的长度：
