如何用JavaScript代码实现伸缩二级菜单

本篇内容介绍了“如何用JavaScript代码实现伸缩二级菜单”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

10余年的山西网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整山西建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联公司从事“山西网站设计”,“山西网站推广”以来，每个客户项目都认真落实执行。

伸缩二级菜单：

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

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代码实现伸缩二级菜单”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！