function puckerMenu(level) {
var levelLength = ('row' + level).length
var toDo = '0'
for (var iCount = 0 iCount <document.all.lengthiCount++){
if ( document.all[iCount].id.indexOf('row' + level) >-1 &&( document.all[iCount].id.length >levelLength)) {
if ( document.all('level' + level).src.indexOf('minus.gif') >-1 ) {
document.all[iCount].style.display = 'none'
toDo = '1'
} else {
document.all[iCount].style.display = 'block'
toDo = '0'
}
}
}
if ( toDo == '1' ) {
document.all('level' + level).src = 'images/plus.gif'
} else {
document.all('level' + level).src = 'images/minus.gif'
}
}
二、然后在网页上定义一个div和一个ul，注意div中要包含一个id为level开头的image和一个onclick事件，ul中id要包含row，默认情况下是展开的，如果需要默认为闭合，则要在ul中加入style="display:none"
例子如下：
<body>
<divstyle="CURSOR: hand"
onclick="puckerMenu('1')"><IMGid=level1
src="images/minus.gif">public class DataAccess</div>
<ulid=row1>
<li>private string connString
<divstyle="CURSOR: hand"
onclick="puckerMenu('2')"><IMGid=level2
src="images /plus.gif">protected DbConnection OpenConnection()</div>
<ulid=row2style="display:none">{...}</ul>
<li>
Other
</ul>
</body>
function f(a){ var obj = document.getElementById(a)if(obj.style.display==""){ obj.style.display = "none"}else{ obj.style.display = ""} } 点击本行在element-ui中采用NavMenu导航菜单作为系统菜单的实现。
官方文档中NavMenu导航菜单有一个Menu Attributes属性collapse，是一个 bollean 类型，用于控制是否水平折叠菜单。
我们可以通过设置collapse属性的值为 true 或 false 来控制菜单的折叠与展开。
解决方案
1.实现一个按钮，
2.在data中定义一个数据collapse
3.实现方法toggleCollapse
4.在el-menu中动态绑定属性值collapse
问题：在左侧菜单的展开与折叠中，文本和图标折叠了，但是菜单的长度并没有折叠，发现原因是菜单的长度给了一个固定的值，而实际上我们需要动态给定长度。如果菜单是展开的，长度是等于文本的长度+图标的长度。如果菜单是折叠的，长度是等于图标的长度。我们可以根据isCollapse的值进行判断，通过它的值为true或者是false，来给定不同的长度：
