如何用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代码实现伸缩二级菜单”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
本文题目:如何用JavaScript代码实现伸缩二级菜单
文章链接:http://myzitong.com/article/iiospp.html