官方文档中NavMenu导航菜单有一个Menu Attributes属性collapse，是一个 bollean 类型，用于控制是否水平折叠菜单。
我们可以通过设置collapse属性的值为 true 或 false 来控制菜单的折叠与展开。
解决方案
1.实现一个按钮，
2.在data中定义一个数据collapse
3.实现方法toggleCollapse
4.在el-menu中动态绑定属性值collapse
问题：在左侧菜单的展开与折叠中，文本和图标折叠了，但是菜单的长度并没有折叠，发现原因是菜单的长度给了一个固定的值，而实际上我们需要动态给定长度。如果菜单是展开的，长度是等于文本的长度+图标的长度。如果菜单是折叠的，长度是等于图标的长度。我们可以根据isCollapse的值进行判断，通过它的值为true或者是false，来给定不同的长度：
<script src="jquery-1.8.2.js"></script><script>
/*展开和收起用一个div,也可以说它是个按钮,假设它的id=d1
假设需要显示和隐藏的div叫d2
下面这段代码只是粗略的实现了你的要求,主要是给你提供个思路
*/
$(function(){
$('#d1').click(function(){//给d1绑定一个点击事件
/*这个判断的意义是,如果d2是隐藏的,那么让它显示出来,并将d1的文本内容替换成收起,
如果是显示的,那么就隐藏它并将d1的文本内容替换为展开*/
if($('#d2').is(':hidden'))
{
$('#d2').slideDown('slow')
$(this).text('收起')
}else{
$('#d2').slideUp('slow')
$(this).text('展开')
}
/*这是一个很简单的事件处理,如果还需要跟上图片的变换,就在判断的对应位置写入图片或者背景变换的代码,*/
})
})
</script>
<div id='d1'>展开</div>
<div id='d2' style=" display:none">内容</div>
