左侧导航栏可显示与隐藏用js该怎么实现

JavaScript014

左侧导航栏可显示与隐藏用js该怎么实现,第1张

1:需要获取左侧导航栏对象。

2:绑定事件

3:css中的显示隐藏有:

3.1:display:block显示

3.2:display:none隐藏

3.3:opacity:1;显示

3.4:opacity::0;隐藏,但元素不会彻底消失只是透明度为0,还是会占据空间。会触发事件。

3.5:visibility:visible显示

3.6:visibility:hidden隐藏,元素不会彻底消失。还会占据空间。

3.7:css3中有transform:scale(1)显示。2D缩放转换

3.8:transform:scale(0)隐藏,2D缩放转换

4:对以上回答如有疑问请指正或者追问。

5:望采纳!

在element-ui中采用NavMenu导航菜单作为系统菜单的实现。

官方文档中NavMenu导航菜单有一个Menu Attributes属性collapse,是一个 bollean 类型,用于控制是否水平折叠菜单。

我们可以通过设置collapse属性的值为 true 或 false 来控制菜单的折叠与展开。

解决方案

1.实现一个按钮,

2.在data中定义一个数据collapse

3.实现方法toggleCollapse

4.在el-menu中动态绑定属性值collapse

问题:在左侧菜单的展开与折叠中,文本和图标折叠了,但是菜单的长度并没有折叠,发现原因是菜单的长度给了一个固定的值,而实际上我们需要动态给定长度。如果菜单是展开的,长度是等于文本的长度+图标的长度。如果菜单是折叠的,长度是等于图标的长度。我们可以根据isCollapse的值进行判断,通过它的值为true或者是false,来给定不同的长度: