怎么用JavaScript实现伸缩二级菜单

本篇内容主要讲解"怎么用JavaScript实现伸缩二级菜单"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"怎么用JavaScript实现伸缩二级菜单"吧!

具体内容如下

伸缩二级菜单：

案例说明：效果图如下，一次只能打开一个，打开后，+ 号变 - 。

HTML 代码

  
    
考勤管理        
            
日常考勤
            
请假申请
            
加班出差
        
    
    
信息中心        
            
日常考勤
            
请假申请
            
加班出差
        
    
    
协同办公        
            
日常考勤
            
请假申请
            
加班出差
        
    
 

JavaScript 代码

// 伸拉列表 // 实现思路： var spans = document.querySelectorAll(".tree span"); for (var i = 0; i < spans.length; i++) {    spans[i].onclick = function () {        // console.log(this);        // 查找要修改的元素 span 自己        // 修改，删除或添加 class -> open        // 判断自己身上是不是有 open，如果有，删除!        // this ->指向触发事件的元素本身        if (this.className == "open") {            // 如果有，删除!            this.className = "";        } else {            // 如果没有，则添加 ，删除其他已经打开的！            //找到打开（open属性的li）            var openSpan = document.querySelector(".tree .open")            if (openSpan !== null) {                // 如果集合不为空，删除他们的 open 属性                openSpan.className = "";            }            // 给自己设置 open 属性            this.className = "open";        }      }}

到此，相信大家对"怎么用JavaScript实现伸缩二级菜单"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！