用javascript实现简单的下拉折叠菜单
Gary_js实现简单的下拉折叠菜单
*{margin:0px; padding:0px;}
#div1 {width:200px; margin:0 auto; line-height:25px;}
ul {list-style:none;}
li {background:#ccc;margin-bottom:3px;}
dl {background:#eee; display:none;}
.active {background:#F90;}
//此处编写js代码，实现简单的下拉折叠菜单，默认菜单1是展开的
菜单1菜单1.1菜单1.2菜单1.3菜单1.4菜单2菜单2.1菜单2.2菜单2.3菜单2.4菜单3菜单3.1菜单3.2菜单3.3菜单3.4
效果一
点击一级菜单时弹出二级子菜单，不需要对菜单进行 display==“none”?true:false (缺点：无法把三个一级菜单状态都设置为"display")
window.onload =function () {var lis = document.getElementsByTagName(‘li‘);var dls = document.getElementsByTagName(‘dl‘);for (var i = 0; i < lis.length; i ++) {
lis[i].index=i;
lis[i].οnclick=function () {for (var i = 0; i < lis.length; i ++) {
lis[i].className=‘‘;
dls[i].style.display= ‘none‘;
}this.className = ‘active‘;
dls[this.index].style.display = ‘block‘;
}
}
}
Gary.Script
效果二
点击一级菜单弹时进行display==“none”?true:false 使二级菜单实现点击收缩功能
//此处编写js代码，实现简单的下拉折叠菜单，默认菜单1是展开的
window.onload =function () {var lis = document.getElementsByTagName(‘li‘);var dls = document.getElementsByTagName(‘dl‘);for (var i = 0; i < lis.length; i ++) {
lis[i].index=i;
lis[i].οnclick=function () {for (var i = 0; i < lis.length; i ++) {
lis[i].className=‘‘;
}this.className = ‘active‘;if(dls[this.index].style.display == ‘block‘)
dls[this.index].style.display = ‘none‘
elsedls[this.index].style.display = ‘block‘}
}
}
Gary.Script
效果三
实现二级子菜单动画展开动画
Gary_js实现简单的下拉折叠菜单
//此处编写js代码，实现简单的下拉折叠菜单，默认菜单1是展开的
window.οnlοad= function() {varlis=document.getElementsByTagName(‘li‘);vardls=document.getElementsByTagName(‘dl‘);for(vari= 0; i
lis[i].index=i;
lis[i].οnclick= function() {for(vari= 0; i
lis[i].className=‘‘;
}this.className= ‘active‘;if(dls[this.index].style.display== ‘block‘)
dls[this.index].style.display= ‘none‘
elsedls[this.index].style.display= ‘block‘}
}
}
菜单1
菜单1.1菜单1.2菜单1.3菜单1.4菜单2菜单2.1菜单2.2菜单2.3菜单2.4菜单3菜单3.1菜单3.2菜单3.3菜单3.4
如果觉得《html下拉折叠菜单 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)》对你有帮助，请点赞、收藏，并留下你的观点哦！
