本文目录一览：
- 1、Vue.js+Element-UI实现点击按钮控制左侧菜单折叠与展开
- 2、Vuejs高度的改变动画探索：折叠面板Collapse组件的最佳实现方案
- 3、求助如何用JS实现折叠菜单功能
- 4、javascript怎么实现列表显示与折叠
- 5、MyEclipse中怎样才能使js代码 折叠起来
Vue.js+Element-UI实现点击按钮控制左侧菜单折叠与展开
在element-ui中采用NavMenu导航菜单作为系统菜单的实现。
官方文档中NavMenu导航菜单有一个Menu Attributes属性collapse，是一个 bollean 类型，用于控制是否水平折叠菜单。
我们可以通过设置collapse属性的值为 true 或 false 来控制菜单的折叠与展开。
解决方案
1.实现一个按钮，
2.在data中定义一个数据collapse
3.实现方法toggleCollapse
4.在el-menu中动态绑定属性值collapse
问题：在左侧菜单的展开与折叠中，文本和图标折叠了，但是菜单的长度并没有折叠，发现原因是菜单的长度给了一个固定的值，而实际上我们需要动态给定长度。如果菜单是展开的，长度是等于文本的长度+图标的长度。如果菜单是折叠的，长度是等于图标的长度。我们可以根据isCollapse的值进行判断，通过它的值为true或者是false，来给定不同的长度：
Vuejs高度的改变动画探索：折叠面板Collapse组件的最佳实现方案
使用过CSS transition属性的童鞋们应该都清楚，当元素在过渡开始或者结束时的高度为auto时，动画是不生效的；那么如何才能实现元素高度的改变动画效果呢？ 本篇文章将为大家提供一个基于Vue3的非常简洁的解决方案。
要实现高度的改变动画，我们需要在动画进行之前为元素设置准确的高度。
当元素由可见变为隐藏状态时，我们需要先获取元素的计算高度，将其设置到style属性上，然后执行一个触发浏览器渲染引擎重绘的动作，然后再将高度设置为0，这样高度的改变动画就会正常进行。
当元素由隐藏变为可见状态时，我们需要先将高度设置为auto，然后获取元素的计算高度，再将高度设置为0，然后执行一个触发浏览器渲染引擎重绘的动作，然后再将高度设置为计算高度，这样高度的改变动画就会正常进行。
现在，根据以上实现原理分析，我们创建一个高度的改变动画通用组件CollapseTransition.vue。该组件非常简单，仅需30多行代码。我几乎每行代码都有注释，大家应该能看懂吧？
以上就是实现高度的改变动画的通用组件源码，童鞋们理解了吗？是不是非常简单？现在，我们实现折叠面板组件。使用过element-ui这样的UI库的童鞋们应该都知道，折叠面板是由两个组件折叠面板Collapse和折叠面板项CollapseItem组合而成；
现在，我们先实现CollapseItem.vue组件。为了节省篇幅，我将源码中的空行全部去掉了，缩进比较规范，自认为可读性还行；源码如下，一共30多行，我直接在源码中添加了注释，就不过多解释了。
这是CollapseItem.vue组件的样式。
现在，我们实现Collapse.vue组件。该组件仍然只有30多行，大家理解起来应该很轻松，我就直接在源码里添加注释作为讲解了；
以上就是折叠面板组件的实现。包括折叠动画组件，一共仅需不到150行代码，是不是非常简单？童鞋们都理解了吗？不管有什么疑问，童鞋们都可以问我。感谢阅读！
求助如何用JS实现折叠菜单功能
最简单的方法就是把二级菜单的样式设置为：
.oe_secondary_submenu {display:none;}
然后在点击的时候显示二级菜单：
$(".oe_secondary_submenu").data("onShow")=false; //一开始状态为隐藏
$(".oe_secondary_menu_section").click(function(){
if($(".oe_secondary_submenu").data("onShow")){ //切换二级菜单的同时改变状态
$(".oe_secondary_submenu").hide();
$(".oe_secondary_submenu").data("onShow",false);
}else{
$(".oe_secondary_submenu").show();
$(".oe_secondary_submenu").data("onShow",true);
}
});
复杂一点的话可以用各种插件
javascript怎么实现列表显示与折叠
一、首先定义一个JavaScript function，如下：
function puckerMenu(level) {
var levelLength = ('row' + level).length;
var toDo = '0';
for (var iCount = 0 ; iCount document.all.length; iCount++){
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
MyEclipse中怎样才能使js代码 折叠起来
js好像只有script/script两个之间的可以折叠，小段的函数不行
