<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//显示角色详细信息
function showDetail(flag, a) {
var detailDiv = a.parentNode.getElementsByClassName('detail_info')[0]
if (flag) {
detailDiv.style.display = "block"
}
else
detailDiv.style.display = "none"
}
</script>
<script src="../assets/jquery.js"></script>
</head>
<body>
<input type ="button" va
在element-ui中采用NavMenu导航菜单作为系统菜单的实现。
官方文档中NavMenu导航菜单有一个Menu Attributes属性collapse，是一个 bollean 类型，用于控制是否水平折叠菜单。
我们可以通过设置collapse属性的值为 true 或 false 来控制菜单的折叠与展开。
解决方案
1.实现一个按钮，
2.在data中定义一个数据collapse
3.实现方法toggleCollapse
4.在el-menu中动态绑定属性值collapse
问题：在左侧菜单的展开与折叠中，文本和图标折叠了，但是菜单的长度并没有折叠，发现原因是菜单的长度给了一个固定的值，而实际上我们需要动态给定长度。如果菜单是展开的，长度是等于文本的长度+图标的长度。如果菜单是折叠的，长度是等于图标的长度。我们可以根据isCollapse的值进行判断，通过它的值为true或者是false，来给定不同的长度：
代码比较长，是你要的效果！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>Semiall.com</title>
<style type="text/css">
#index_yp {
width: 240px
height: 300px
float: left
border: 1px solid #71B3C6
}
.index_yp_card {
width: 225px
height: 33px
float: left
padding-left: 15px
}
.yp_card_0 {
width: 70px
height: 33px
float: left
background-image: url('idx_fl/images/hotShopCurrent.jpg')
text-align: center
color: #003366
font-weight: bold
line-height: 32px
cursor: pointer
}
.yp_card_1 {
width: 71px
height: 33px
float: left
background-image: url('idx_fl/images/b1tDot.jpg')
background-position: 0px 2px
background-repeat: no-repeat
text-align: center
color: #333333
line-height: 32px
cursor: pointer
}
.yp_card_2 {
float: left
height: 33px
background-image: url('idx_fl/images/b1tDot.jpg')
background-position: 0px 2px
background-repeat: no-repeat
}
.index_yp_main {
width: 240px
height: 270px
float: left
}
.yp_main_content {
width: 201px
height: 33px
float: left
border: 1px solid #BCDCE4
background-color: #F1F8FA
margin-bottom: 7px
padding: 3px 6px 3px 6px
overflow: hidden
}
.yp_main_content dt {
width: 201px
height: 13px
float: left
font-weight: normal
margin: 0px
font-size: 12px
padding-top: 2px
}
.yp_main_content dd {
width: 201px
line-height: 13px
float: left
font-weight: normal
margin: 0px
font-size: 12px
padding-top: 3px
text-align: right
}
.yp_main_content img {
padding: 0px 0px 2px 3px
}
.yp_main_list {
width: 215px
float: left
}
</style>
</head>
<body>
<div id="index_yp">
<!--yp1 start-->
<div id="yp_card1" style="display:block">
<div class="index_yp_card">
<div onmouseover="changeMc(1,1)" class="yp_card_0">推荐</div>
<div onmouseover="changeMc(1,2)" class="yp_card_1">生产</div>
<div onmouseover="changeMc(1,3)" class="yp_card_1">贸易</div>
<div class="yp_card_2"> </div>
</div>
<div onmouseover="changeMc(1,1)" class="index_yp_main">
<table class="hotxum" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="hotShop sort1 block yspace" id="DivShopPaiHang_Food">
<div class="txt" id="DivShopPaiHang_Flag1_Content" style="display: none">
</div>
<div class="txt" id="DivShopPaiHang_Flag2_Content" style="display: none">
</div>
<div class="txt" id="DivShopPaiHang_Flag3_Content" style="display: none">
</div>
<div class="txt" id="DivShopPaiHang_ShowPanel">
<div class="txt11">
11111111111111
</div>
</div>
</div>
<p>
<script type="text/javascript">
if(9>=1){
SwapPaiHangShopDiv('DivShopPaiHangFlag1','1')
}
</script>
</p>
</td>
</tr>
</table>
</div>
</div>
<!--end-->
<!--yp2 start-->
<div id="yp_card2" style="display:none">
<div class="index_yp_card">
<div onmouseover="changeMc(2,1)" class="yp_card_1">推荐</div>
<div onmouseover="changeMc(2,2)" class="yp_card_0" >生产</div>
<div onmouseover="changeMc(2,3)" class="yp_card_1">贸易</div>
<div class="yp_card_2"> </div>
</div>
<div onmouseover="changeMc(2,2)" class="index_yp_main">生产(sdf
dsfsd
)</div>
</div>
<!--end-->
<!--yp3 start-->
<div id="yp_card3" style="display:none">
<div class="index_yp_card">
<div onmouseover="changeMc(3,1)" class="yp_card_1">推荐</div>
<div onmouseover="changeMc(3,2)"class="yp_card_1">生产</div>
<div onmouseover="changeMc(3,3)" class="yp_card_0">贸易</div>
<div class="yp_card_2"> </div>
</div>
<div onmouseover="changeMc(3,3)" class="index_yp_main">贸易(循))</div>
</div>
<!--end-->
<!--end-->
</div>
<script language="javascript" type="text/javascript">
<!--
var s=3
var timer
function changeMc(x,y){
if (x!=y){
document.getElementById('yp_card'+x).style.display = "none"
document.getElementById('yp_card'+y).style.display = "block"
s=y
}
}
-->
</script>
</body>
</html>
