JS 案例 树形菜单
制作树形菜单
需求说明
使用项目列表制作一个完整的树形菜单，可通过单击一级菜单来显示和隐藏二级菜单，完成效果如图所示：
使用带参数的函数，通过参数来控制显示或隐藏某个列表。
HTML代码片：
<div class="menu"><ul id="menu"><li class="menuList">职能部门<ul><li>学工部</li><li>后勤</li><li>保卫处</li></ul><li class="menuList">职能部门<ul><li>学工部</li><li>后勤</li><li>保卫处</li></ul><li class="menuList">职能部门<ul><li>学工部</li><li>后勤</li><li>保卫处</li></ul></li></ul></div>
JS代码片：
<script type="text/javascript">var menuList=document.getElementsByClassName("menuList")var mymenu=document.getElementById("menu")var myul=mymenu.getElementsByTagName("ul")for(let i=0;i<menuList.length;i++){menuList[i].onclick=function(){for(let j=0;j<myul.length;j++){if(i==j){myul[j].style.display="block";}else{myul[j].style.display="none";}}}} </script>
效果：
单击一级菜单出现二级菜单。
JS 案例 树形菜单相关推荐
- mysql jquery tree_php mysql js实现树形菜单代码
这是一款由php mysql数据库的读取数据库的内容再生成树型号菜单由js来控制 代码如下 复制代码 类别目录树 function showmenu(menuid) { if(menuid.styl ...
- elementui树状菜单tree_vue.js+element-ui做出菜单树形结构
这次给大家带来vue.js+element-ui做出菜单树形结构,vue.js+element-ui做出菜单树形结构的注意事项有哪些,下面就是实战案例,一起来看一下. 由于业务需要,要求实现树形菜单, ...
- vue树形权限菜单_Vue.js 递归组件实现树形菜单（实例分享）
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...
- vue树形权限菜单_Vue.js 递归组件实现树形菜单
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. main.js 作为入口: import Vue from 'vue' import main from './components/ ...
- HTML实战案例素材1：制作树形菜单页面
实战案例素材1:制作树形菜单页面 一.完整的页面效果图 二.文本素材 我的电脑文件列表 我的电脑 本地磁盘(C:) 我的文档 我的收藏 ...
- 动态html树形菜单模板,JS+CSS简易树状菜单Tree
/p> "http://www.w3.org/TR/html4/loose.dtd"> 树形菜单实例-www.mb5u.com function showhide_ob ...
- js树形菜单求出最大的年龄
以下是一个树形菜单,求出年龄最大的那一位和年龄最小的哪一位 let tree = {name: '老板',age: 46,children: [{name: '经理1',age: 36,childre ...
- easyUI前端框架的tree（树）前台展示（树形菜单二）——java
转载请标明出处:https://blog.csdn.net/men_ma/article/details/106847165. 本文出自 不怕报错 就怕不报错的小猿猿 的博客 easyUI前端框架的t ...
- ztree树形菜单demo
阅读目录 zTree树形菜单 回到顶部 zTree树形菜单 树形菜单使用方式如下: HTML引入的方式如下: <!DOCTYPE html><html><head> ...
- SpringMVC+ZTree实现树形菜单权限配置
计划在开源项目里加入权限配置的功能,打算加入zTree实现树形结构. Team的Github开源项目链接:https://github.com/u014427391/jeeplatform 欢迎sta ...
最新文章
- UI自动化页面定位（一）
- 求一个二叉树中距离最远的两个节点
- 2.2.4 数据的的存储和排列
- 华为手机日历倒计时_倒计时40小时！谁来拿走这台华为手机？
- mysql开启慢查询方法(转)
- threadx 信号量 应用_操作系统及ThreadX简介.ppt
- android 暂停其他app的声音_【一万个APP】第二十二期潮汐
- java a星寻路算法_用简单直白的方式讲解A星寻路算法原理
- Python 列表(List)
- javaEE插件安装
- 网易编程题目——相反数：
- Python使用matplotlib可视化模拟闯红灯现象柱状图
- 【MFC】测边网平差计算
- 京东物流系统架构演进中的最佳实践
- android跳转app store,从微信跳转到appstore下载App
- 【机器学习】K近邻（KNN）算法详解
- 计算机修改IP脚本,用脚本修改计算机名和IP地址
- C语言一般考点笔试,c语言常见笔试题及答案
- C/C++ 余弦函数 cos - C语言零基础入门教程
- vue-render