开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 三级树形菜单

在JavaScript中实现三级树形菜单通常涉及到数据结构的设计、DOM操作以及事件处理。下面我会给出一个基础的概念解释，以及一个简单的示例代码来实现三级树形菜单。

基础概念

数据结构：树形菜单的数据结构通常是一个嵌套的对象数组，每个对象代表一个菜单项，可以包含子菜单项。
DOM操作：使用JavaScript动态创建和修改DOM元素，以显示或隐藏菜单项。
事件处理：为菜单项添加点击事件，以展开或折叠子菜单。

示例代码

以下是一个简单的三级树形菜单的实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三级树形菜单</title>
<style>
    .menu-item {
        cursor: pointer;
    }
    .submenu {
        display: none;
        margin-left: 20px;
    }
</style>
</head>
<body>

<div id="menu"></div>

<script>
const menuData = [
    {
        name: '菜单1',
        children: [
            {
                name: '子菜单1-1',
                children: [
                    { name: '子菜单1-1-1' },
                    { name: '子菜单1-1-2' }
                ]
            },
            { name: '子菜单1-2' }
        ]
    },
    {
        name: '菜单2',
        children: [
            { name: '子菜单2-1' },
            {
                name: '子菜单2-2',
                children: [
                    { name: '子菜单2-2-1' }
                ]
            }
        ]
    }
];

function createMenu(data, parentElement) {
    data.forEach(item => {
        const div = document.createElement('div');
        div.className = 'menu-item';
        div.textContent = item.name;
        parentElement.appendChild(div);

        if (item.children) {
            const submenu = document.createElement('div');
            submenu.className = 'submenu';
            parentElement.appendChild(submenu);
            createMenu(item.children, submenu);

            div.addEventListener('click', (e) => {
                e.stopPropagation();
                submenu.style.display = submenu.style.display === 'none' ? 'block' : 'none';
            });
        }
    });
}

const menuContainer = document.getElementById('menu');
createMenu(menuData, menuContainer);
</script>

</body>
</html>

优势

清晰的结构：树形菜单可以清晰地展示层级关系。
动态生成：使用JavaScript可以动态生成菜单，无需手动编写HTML。

应用场景

后台管理系统：用于展示和管理各种功能和数据。
网站导航：为用户提供清晰的网站结构和导航路径。

可能遇到的问题及解决方法

菜单项过多导致页面卡顿：可以通过虚拟滚动等技术优化性能。
菜单样式与页面风格不符：可以通过CSS自定义菜单样式，使其与页面风格保持一致。
菜单交互不流畅：可以通过优化JavaScript代码和使用事件委托等技术提高交互性能。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js树形菜单

DOCTYPE html> 树形菜单 js/tree.js"> <!...cover; background-repeat: no-repeat; } /*.test{display: block;background-repeat: no-repeat;}*/ 第三部：JS...设计 /*树形菜单：冒泡排序*/ var menu,subMenus,menuIcon; function init(){ menuArray=document.getElementById('outerul

591 0

三级侧边栏-树形菜单案例效果

sec-class > li { 80 padding-left: 12px; 81 } 82 83 .sec-class > li:hover { 84 color: #fff; 85 } js...45 } 46 }) 47 48 }) js懒得整理了。。。

4.9K5 0

TreeTable树形菜单

html js var table= { id: “treeTable”, table: null, layerIndex: -1 }; /** 初始化表格的列 */ tableTer.initColumn

2.3K5 0

bootstrap树形菜单原

在工作中经常用的树形菜单，bootstrap树形菜单 js/bootstrap-treeview.js"> //引用bootstrap-treeview.js js/treeview.js"> //引用树形菜单的数据 $(function() { ...$('#treeview4').treeview({ color: "#428bca", //树形菜单的颜色 data: defaultData //树形菜单的数据

3.7K2 0

python 三级菜单

三级菜单: 打印省、市、县三级菜单。...], '宁波' : ['海曙','江东','江北','镇海','余姚'], '温州' : ['鹿城','龙湾','乐清','瑞安','永嘉'] } } 打印1级菜单...print(zone.keys()) 对于zone而言，只有3个key,分别是山东，江苏，浙江执行输出 dict_keys(['山东', '江苏', '浙江']) 用户选择菜单的时候，如果输入中文，...打字比较麻烦，菜单列表需要有一个编号。...转换为列表 #省列表 province_list = list(zone.keys()) print(province_list) 执行输出 ['山东', '江苏', '浙江'] 下一步，需要打印1级菜单

1.2K2 0

zTree实现树形结构菜单

文章目录一、简介二、前端渲染效果三、实现步骤 1、数据库表结构 2、引入zTree插件 3、树形结构实体类SysModule 4、表示层代码 5、js渲染部分 1、树初始化配置 2、加载数据树...text/css"> <script type="text/javascript" src="/ccms/commons/jslib/ztreeV3.5.15/jquery.ztree.all-3.5.js..."> <script type="text/javascript" src="/ccms/commons/jslib/js-gmxt-define/ztreeTool.js"> 3、树形结构实体类SysModule 省略get和set方法 public class SysModule { /**模板编码*/ private String moduleCode...private String parentCode; /**是否为叶子节点*/ private int isLeaf; /**同级排序编号*/ private int sortNumber; } 树形结构辅助类

5.5K4 0

Java 遍历之树形菜单

818605-20190420093151307-954262998.png 如图，实现这样一个树形结构的菜单，java怎么实现？这里就需要用到遍历。...} public void setChildren(List children) { this.children = children; } } 树形结构...public MenuTree(List menuList) { this.menuList = menuList; } /** * 功能描述: 建立树形结构

4K2 0

动态加载的树形菜单

动态加载的树形菜单开发工具与关键技术：MVC 树形菜单作者：盘洪源撰写时间：2019年6月2日星期天在做到页面需要做到树形菜单，而且还是动态从数据库加载数据的，就是树形菜单的节点由数据库的数据来填充...首先一开始是这个数据库的设置，这个数据库的设置很重要，一开始想着这个树形菜单可以无限级的循坏下去，这得建多少个表啊，后来才发现自己想多了，只需要一个表格就可以实现了，如下 ?...数据库表的设置大概是这样，就是给这个表加上一个字段pId，这上面的关系怎么看，1和2的pId都是0就是说他们没有上一级，1-1和1-2的pId为1说明他们的上一级是1就是这样一层一层嵌套下去，这样就可以实现无限级的树形菜单...}); return Json(list, JsonRequestBehavior.AllowGet); } 前台初始化树形菜单的代码...这是一个很简单的树形菜单，首先开始的在后台将数据库中的数据查询出来，前台就初始化这个树，通过url请求到数据，然后就在页面加载事件初始化这个树。

3K1 0

ztree+json，渲染树形菜单

专门适合项目开发,尤其是树状菜单、树状数据。.../jquery-2.1.1.min.js"> js/jquery.ztree.core-3.5.min.js">js/jquery.ztree.exedit-3.5.min.js"> js/jquery.ztree.excheck-3.5.min.js"> js/jquery.ztree.exedit...: #0b2b5f;"> //树形菜单

2.2K3 1

layui三级菜单渲染

今天给大家讲解一下layui的三级动态加载菜单含后端代码。我是最近刚学的layui，非常感谢贤心大神。开发出这么牛逼ui的框架。...声明：KingYiFan前段是渣渣，本次讲解用的前端js并非KingYiFan亲自封装只是稍作修改，非常感谢封装三级菜单CSDN的大神：yufengaotian 下图就是三级菜单效果。... 三级菜单展示...class="layui-nav-more">'; ulHtml += ''; //三级菜单...list); List trees_ = TreeBuilder.buildByRecursive(list); } } ---- 这就是layui动态三级菜单渲染

2.4K1 0

JAVA中怎样实现树形菜单

就是在实际开发过程中，总会遇到菜单，或则是权限，这个时候就涉及到后端返回数据给前端的时候，不能一个集合把数据一股脑的全部扔给前端，总要把数据整理好，做成像书目录一样的结构返回给前端。...', parent_id int(11) NOT NULL DEFAULT '0' COMMENT '父目录ID', menu_name varchar(255) NOT NULL COMMENT '菜单名称...', menu_level int(11) NOT NULL COMMENT '菜单等级', route varchar(255) NOT NULL COMMENT '路由', PRIMARY KEY...id) COMMENT '主键', UNIQUE KEY parent_id (parent_id,menu_name,menu_level,route) COMMENT '唯一索引，包含父目录ID、菜单名称...、菜单等级和路由' ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT '存储引擎为InnoDB，字符集为utf8'; ②向表中插入数据 SQL复制代码INSERT

1501 0

python 字典实现三级菜单

简介：1.用字典建立一个省市县的三级菜单　　　2.开始显示所有的省份，输入要进入的省份之后，显示该省份下的所有市，输入市显示该市下的所有县　　　3.在每一级菜单下都可以返回到上一层菜单　　　4.随时可以退出...current_layer = parent_layers.pop() # 取出列表的最后一个元素，因为它就是当前层的父级 69 else: 70 print("无此项") 三级菜单

1.2K1 0

Python下三级菜单实现

今天学了一个三级菜单，甚是开心！！！ 1.流程图 2.代码如下： #!

9771 0

简单的树形菜单如何写

查看树形菜单业务需求数据结构中含有图片、名称、children的树形结构，需要展示出每一级的图片名称和图片，找了些树形图的插件，都没有展示大的图片的，一般都是小图标，就自己试着写一个包含图的简单的插件...树形图的结构 js/jQuery-2.1.4.min.js"> var data = [{ title: 'biaoti1',...ul的后标签 html += '' return html; } //调用函数，传参数组data,将其赋值给第一级ul的父级结构box,生成动态菜单

2.3K4 1

Python实现简单的三级菜单

while Tag: print('\033[31m%s \033[0m' % '请输入序号'.ljust(20, '*')) print('\033[31m***输入back返回上一级菜单...current_layer = parent_layer.pop() else: print('\033[31m%s \033[0m' % '已经到达最上级菜单

2.3K9 0

Python——三级菜单（字典的应用）

最近几天在做的一个题目：三级菜单，按省、市、县三级做一个查询菜单，要求如下， 1.可逐级查询（比如输入山东省，跳出山东所有市，再输入青岛市，可展示青岛所有县） 2.输入b可以返回上一层，比如莱西一级，

1.1K2 0

非递归实现树形下拉菜单

非递归实现树形下拉菜单博主默语带您 Go to New World....好的，我会更详细地讲解非递归实现树形下拉菜单的完整思路和代码，同时为每一部分都加上清晰的注释，让初学者也能看懂。这次我们会以逐步实现的方式讲解每一步的逻辑。...非递归实现树形下拉菜单什么是非递归实现？在递归中，函数会自己调用自己。非递归实现是用队列（Queue）或栈（Stack）来替代函数调用栈，从而手动管理需要处理的数据，逐步完成任务。...目标构造一个树形结构，比如：一级分类A └── 二级分类A1 └── 三级分类A1-1 一级分类B └── 二级分类B1 我们希望用非递归方法，将 parentId 表示层级关系的分类数据构建成上面的树状结构...当队列为空时，树形结构已完成。

921 0

java使用递归实现三级菜单

java使用递归实现三级菜单 javaCopy codeimport java.util.*; public class Menu { private static Map<String...input.equals("back")) { System.out.println("请选择三级菜单（输入数字 1/2/3）或返回上一级（输入 back）：");...菜单数据使用一个 Map 存储，键为一级菜单项，值为该菜单项下的二级菜单列表。在 main 方法中调用 printMenu 方法开始执行程序。...如果用户选择了一个有效的二级菜单项，则调用 printSubSubMenu 方法打印该二级菜单项的三级菜单。 printSubSubMenu 方法同样循环等待用户输入三级菜单项或返回上一级。...在这个示例中，三级菜单项是固定的，因此只需要打印三个选项。如果用户选择了一个有效的三级菜单项，则显示所选项的信息。在这个示例中，使用了递归方法来实现三级菜单的显示。

1.5K6 0

Python——三级菜单（字典＋文件读写）

三级菜单，按省、市、县三级做一个查询菜单，要求如下， 1.可逐级查询（比如输入山东省，跳出山东所有市，再输入青岛市，可展示青岛所有县） 2.输入b可以返回上一层，比如莱西一级，输入b返回上级青岛，再输入...这个是上上期的三级菜单的题目。...后来呢，又学了文件读写的章节，然后题目又延伸了一下，延伸内容如下： 1.将三级菜单存入文本文件中 2.展示省市县，数据存在文本中； 3.对菜单实现增删改，删、改容易理解，增么，就是用户增加一个城市...parent_layers: current_layer = parent_layers.pop() else: print('目前为最上级菜单

1.3K4 0

Laravel入门之实现菜单的树形分类

实现菜单的树形分类主要是有两个比较重要的点，上图我们可以看到分类是三级分类，实现了对菜单的限制，其中主要是有以下几个点需要注意，之后就乘上热乎乎的代码： SQL语句的拼接撰写，形成原始数据；前台渲染根据...path路径字符串判断需要加几处分段符；判断三层菜单，并禁止三层菜单继续向下分级。...路由设置 Route::get('types', 'TypesController@index'); 后端读取处理方法 /** * 菜单控制首页 * @return \Illuminate\Contracts...*/ public function index(){ // 求取行数 $count = DB::table('dzushop_types')->count(); // 查询树形结构并且运用...> {{ str_repeat('|-----',$tot) }}{{ $value->name }} 三级分类约束语句 @if($tot >= 2)

2.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭