javascript之折叠式二级菜单

来源：互联网发布：qq等级查询软件编辑：程序博客网时间：2024/04/30 13:25
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>ul{list-style: none;padding:0;margin:0;width: 150px;}.menu-main>li{margin-top:1px;}.menu-main>li>a{display: block;height: 30px;padding:5px 10px;line-height: 30px;text-decoration: none;text-align: center;font-weight: bold;color:#fff;background-color: rgb(51,51,51);}.sub-menu{display: none;}.sub-menu>li>a{display: block;height: 20px;padding:5px 10px;line-height: 20px;text-decoration: none;text-align: center;color:rgba(255,255,255,0.5);background-color: rgba(0,0,0,0.5);}.sub-menu>li>a:hover{color:#fff;background-color: rgba(0,0,0,0.6);}.submenu-active{color:#fff !important;background-color: rgba(0,0,0,0.6) !important;}</style></head><body><!--        data-* h5新增全局属性，主要用于数据存储以及传递        --><ul class='menu-main'><li><a href="javascript:void(0)" data-open="none">学员管理</a><ul class='sub-menu'><li><a href="#">学员新增</a></li><li><a href="#">学员列表</a></li><li><a href="#">学员搜索</a></li></ul></li><li><a href="#" data-open="none">日志管理</a><ul class='sub-menu'><li><a href="#">今日提交</a></li><li><a href="#">日志搜索</a></li></ul></li><li><a href="#"  data-open="none">民主活动</a><ul class='sub-menu'><li><a href="#">投票</a></li><li><a href="#">抽奖</a></li></ul></li><li><a href="#"  data-open="none" >系统设置</a><ul class='sub-menu' id="nodes"><li><a href="#">个人信息</a></li><li><a href="#">密码修改</a></li><li><a href="#">系统退出</a></li></ul></li></ul><script>var menus = document.querySelectorAll('.menu-main>li>a');for(var i =0;i<menus.length;i++){//为四个元素绑定点击事件menus[i].addEventListener('click',function(){if(this.dataset.open == 'none'){this.dataset.open = 'block';}else{this.dataset.open = 'none';}//获取当前元素下的子节点<ul class='sub-menu'>并设置显示方式this.nextSibling.nextSibling.style.display = this.dataset.open;})}//获取所有的二级菜单，为菜单设置选中效果var submenus = document.querySelectorAll('.sub-menu>li>a');for(var i = 0;i<submenus.length;i++){submenus[i].addEventListener('click',function(){//先将所有的子选项class置为空for(var j = 0;j<submenus.length;j++){submenus[j].className = '';}//设置被选中项的class值this.className = this.className == 'submenu-active'?'':'submenu-active';});}</script></body></html>
阅读全文
0 0