开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

完整的js树形菜单代码

以下是一个简单的JavaScript树形菜单代码示例：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tree Menu</title>
    <style>
        ul {
            list-style-type: none;
            padding-left: 20px;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <ul id="treeMenu">
        <li>
            <span class="toggle">+</span> Node 1
            <ul class="hidden">
                <li>Subnode 1.1</li>
                <li>Subnode 1.2</li>
            </ul>
        </li>
        <li>
            <span class="toggle">+</span> Node 2
            <ul class="hidden">
                <li>Subnode 2.1</li>
                <li>Subnode 2.2</li>
            </ul>
        </li>
    </ul>

    <script src="treeMenu.js"></script>
</body>
</html>

JavaScript代码 (treeMenu.js)

document.addEventListener('DOMContentLoaded', function() {
    const toggles = document.querySelectorAll('.toggle');

    toggles.forEach(toggle => {
        toggle.addEventListener('click', function() {
            const ul = this.nextElementSibling;
            if (ul.classList.contains('hidden')) {
                ul.classList.remove('hidden');
                this.textContent = '-';
            } else {
                ul.classList.add('hidden');
                this.textContent = '+';
            }
        });
    });
});

基础概念

DOM操作：JavaScript通过DOM（文档对象模型）与HTML元素进行交互。
事件监听：通过addEventListener方法为元素添加点击事件。
类操作：使用classList来添加或移除CSS类，从而控制元素的显示和隐藏。

优势

动态交互：用户可以通过点击展开或折叠子菜单，提升用户体验。
易于扩展：可以轻松添加更多节点和子节点。

类型

静态树形菜单：如上例所示，菜单结构在HTML中预先定义。
动态树形菜单：通过JavaScript动态生成菜单结构，通常用于数据量较大或需要频繁更新的场景。

应用场景

网站导航：用于复杂的网站结构，帮助用户快速定位内容。
文件管理系统：模拟文件夹和文件的层次结构。
设置选项：在软件或应用的设置界面中，展示多层次的配置选项。

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

事件绑定失败：确保DOM元素加载完毕后再绑定事件，可以使用DOMContentLoaded事件。
样式不生效：检查CSS选择器是否正确，以及是否有其他样式覆盖了当前样式。
性能问题：对于大型树形菜单，考虑使用虚拟滚动技术优化渲染性能。

通过以上代码和解释，你应该能够理解并实现一个基本的树形菜单。如果有更具体的问题或需求，可以进一步调整代码。

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

有帮助

没帮助

相关·内容

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

动态加载的树形菜单

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

3K1 0

简单的树形菜单如何写

查看树形菜单业务需求数据结构中含有图片、名称、children的树形结构，需要展示出每一级的图片名称和图片，找了些树形图的插件，都没有展示大的图片的，一般都是小图标，就自己试着写一个包含图的简单的插件...树形图的结构 </span...document.getElementById("content").innerHTML = JSON.stringify(translateData(json, 'id', 'pid', 'chindren'), null, 2) 完整的代码.../js/jQuery-2.1.4.min.js"> var data = [{ title: 'biaoti1',...; } //调用函数，传参数组data,将其赋值给第一级ul的父级结构box,生成动态菜单 var treebox = document.getElementById("tree-box

2.3K4 1

layUI展示树状treetable树形表格完整代码「建议收藏」

只有树状菜单的文档：https://www.layuion.com/doc/modules/tree.html layui官网已关闭，相关内容可到这里查看：https://www.layuion.com.../ 先看效果图：文章结尾给大家提供示例代码下载。...js和css json是后端所需要给前端传的数据格式（例子，不是下方代码的数据）。...3、还需要正常的引用layUI的必要文件（例如：layui.js、layui.css等，根据项目所需！）...HTML:（下方的table标签和最后三个button 是重要代码，其他可忽略）

2.4K2 1

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

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

2.4K2 0

用Vue.js递归组件构建一个可折叠的树形菜单

在Vue.js中一个递归组件调用的是其本身，如： Vue.component('recursive-component', { template: `的树形菜单的来一步步进行。数据结构一个树状UI的递归组件将是一些递归数据结构的可视化表达。...在树菜单中，当我们到达一个没有子节点的节点的时候，我们希望停止递归。...首先，我们声明一个Vue实例，具有一个数据结构包括data属性和定义过的treemenu组件。app.js文件如下： import TreeMenu from '....来自汇智网（www.hubwiz.com，有很多性价比极高的vue.js内容哦）的小智翻译。

5.1K3 1

js代码实现下拉菜单

大家好，又见面了，我是你们的朋友全栈君。...效果 js代码： function ShowSub(li) {//函数定义 var subMenu = li.getElementsByTagName...ul{ list-style:none;} ul li{ float:left; line-height:40px; text-align:center; width:100px;}//ie7显示宽度的兼容性...设置width 而不用padding的自适应 a{ text-decoration:none; color:#000; display:block;} a:hover{ color:#F00; background-color...#666;} ul li ul li{ float:none;background-color:#eee; margin:2px 0px;} ul li ul{ display:none;} html代码

8.3K3 0

js禁止右键菜单代码、禁止复制粘贴代码

禁止右键菜单代码、禁止复制粘贴代码 //屏蔽右键菜单 document.oncontextmenu

6.7K2 0

Qt 添加菜单及菜单的事件响应（完整的示例）

Qt添加菜单有两种方法，一是用代码直接手动添加，二是在Qtdesigner中在界面上直接添加。先介绍用代码如何添加。需要用到两个类QMenu和QAction，例如我的Demo程序界面如下： ?...QAction *myAc3; private slots: void pop1(); void pop2(); void pop3(); }; 在VS2010中建立Qt工程但是代码中总是出现红色波浪线

7.3K2 0

MySQL树形结构(多级菜单)的数据库表设计和查询

概述想必下面的树形菜单大家都见过，但是是如何实现的，你们有没有想过？...说下我是怎么想起设计这个东西的，在一个惠风和畅，风和日丽的午后，我盯着眼前已完成的项目陷入沉思，良久，我将树形菜单的每一级菜单都设计成为了单独的表，正准备写接口将所有的菜单都返回的时候，带我的哥哥给我讲了一遍树形菜单的结构与数据库如何设计...数据库的设计其实简单来讲就是为每个菜单栏在添加一个parent_id字段，记录着自己父菜单的ID,以下面的菜单为例，我给出了对应数据库简单的设计，想必你一看就明白了。...树形菜单的查询数据库的设计虽然已经完成了，但是我们如何实现查询呢？...ApiModelProperty("该菜单的名称") private String name; @ApiModelProperty("该菜单的父菜单的ID") private Integer

10.7K1 0

js+css3底部下划线导航菜单代码

效果图 js代码 const indicator = document.querySelector('.nav-indicator'); const items = document.querySelectorAll...handleIndicator(e.target);}); item.classList.contains('is-active') && handleIndicator(item); }); css代码...border-radius: 8px 8px 0 0; } @media (max-width: 580px) { .nav { overflow: auto; } } html代码...DOCTYPE html> 动画菜单指标 js">

3.9K2 0

关于树形目录的一段javascript代码

2004年时候写的，javascript出来的时间不久，没那么多框架和现成的模板，当时比较流行树形目录展现层级数据，但那棵目录树有几万个节点，而且层级不是固定的，并且要求点击叶子节点选中所有直接父节点，...曾经写过javaservlet代码，但服务端和客户端通信有问题，后来再次重新改写，在JSP服务端输出树形目录树，在js端进行响应优化，采用的是递归算法，花了三天时间研究节点和节点的HTML标签关系，最后写出来了...十年以后申请专利，结果经过漫长的等待，被驳回来了。仅此怀念过去的代码时光！...唉，很久以前写的代码，晒一晒，估计自己看都看不懂了，:( 代码示例 var head = "display:''" img_close=new Image() img_close.src="/sysManage...(主要用于权限树的选择). * @param obj 节点选择框对象(checkbox对象) *根据所选节点的值，遍历整个树，从而选中满足条件的节点. */ function checkNode(obj

7921 0

scrapy爬虫完整的代码实例

大家好，又见面了，我是你们的朋友全栈君。...item['tags'] = quote.css('div.tags a.tag::text').getall() yield item 进入items.py,代码如下

6363 0

PHP一个比较完善的树形结构代码

php /** * 通用的树型类，可以生成任何树型结构 */ class tree { /** * 生成树型结构所需要的2维数组 * @var array *...-------------- * @author Midnight(杨云洲), yangyunzhou@foxmail.com * @param $myid 表示获得这个ID下的所有子级...* @param $str 生成树形结构基本代码, 例如: "\$spacer\$name" * @param...$sid 被选中的ID, 比如在做树形下拉框的时候需要用到 * @param $adds * @param $str_group * @return unknown_type

9132 0

JS-制作可伸缩的水平菜单栏

702004176@qq.com" /> 可伸缩的导航菜单...{ This.style.width = This.offsetWidth + 8 + "px"; if(This.offsetWidth >= 160)//这里，只有一行代码...-- // jq的制作方法 $(function() { //$()==js里面的：window.onload = function(){};让页面加载完成之后再进行调用函数...$('a').hover( //$('x')选择器，选择标签是x的，括号里的引号里添加的是标签名 //hover方法，表示鼠标经过的时候的效果 //下设两个函数，一个鼠标移入动作...代码 2 window.onload = function() { 3 var aA = document.getElementsByTagName

4.5K4 0

清空默认边距的完整代码

-- 1.为什么要清空默认边距(外边距和内边距) 在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等, 所以在企业开发中, 编写代码之前第一件事情就是清空默认的边距 2.如何清空默认的边距格式...所以性能不好企业开发中可以从这个网址中拷贝 http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css --> 葬爱:非主流文化的常用词

9510 0

循环队列的实现（附完整代码）

，删除成功返回真 5.检查队列是否为空 6.检查队列是否已满首先我们可以将之前写的用链表实现的队列的代码拷贝到该题中，以便于循环队列的实现，然后开始构思。...也就是说，循环队列中我们如果在栈满了之后还想存储值，也是可以的，但是就要反复地使用之前用过的空间，会将其覆盖，所以尾指针rear和头指针front的位置的下标是会有覆盖的变化的我们将循环队列形象地转换成数组...你可以看到，队列为空时，按照题目的意思，front的位置时为rear+1的，在上图中，其实front的位置是0，rear的位置是3。...）和存储个数k有着以下关系：就是说无论front的位置怎么移动，他最终都是在1-k的范围之内的 front = front % （ k + 1 ）现在，我们就可以开始用代码实现循环队列...free掉，不然可能会出现内存泄漏 void myCircularQueueFree(MyCircularQueue* obj) { free(obj->a); free(obj); } 完整代码如下

1911 0

jQuery的Ajax实例（附完整代码）

script：返回纯文本JavaScript代码。 json：返回json数据。...我这里的解释是：这是设计接口的人决定的，不是前端人员决定的。建议大家在学习ajax时，能够配合项目的实战，这样对于理解这些内容会比较轻松，我之后也可能会加入更加完整的实例，供大家参考学习。...—————–更新结束———————————————————————————————- 代码 js部分 js"> function showAdress() { var str = document.getElementById...代码 js部分 js">

4.9K3 0

链表的实现（文末附完整代码）

链表的概念及结构链表是一种物理存储结构上非连续、非顺序的存储结构，数据元素的逻辑顺序是通过链表中的指针链接次序实现的我们在上一篇文章所学习的顺序表是连续存储的例如：顺序表就好比火车上的一排座位...，是连续的而链表就好比是火车的各节车厢，中间有东西将其互相连接的链表的基本结构图如下：有一个指针指向下一个节点链表的概念及结构实际中链表的结构非常多样，以下情况组合起来就有8种链表结构...：链表可以是单向和双向，循环和不循环，带头和不带头，这样一组合，就会出现八种类型的列表单向的列表如下：双向列表：相比较单向，双向的增删查改较为容易，他会自带一个prev的节点，能顾标记当前节点的前一个节点...，因为当链表为空时，我们要改变的是节点的地址，而我们要改变地址，就要用地址的地址，也就是二级指针首先，需要插入一个节点我们要做的就是创建一个新节点，我们之前定义了的一个函数直接使用然后我们创建一个...完整代码如下： SListNode* BuySListNode(SLTDateType x) { SListNode* newnode = (SListNode*)malloc(sizeof(SListNode

1191 0

js拖动（一个完整的案例呈现）

div1.ondragleave=function() { document.body.style.background="white"; }; //以上拖动文件到div1中发生的颜色问题...{ a++; document.title=a; return false; } //以上是title哪里的累加事情....//在进行拖放操作的时候,dataTransfer对象可以用来保存被拖动的数据 //name与size为它内置的属性. 第四部分： ? 代表了下面的图片： ?...为什么parseInt因为要转换成整数啊.一秒一秒的,不是0.1之类的啊. 第五部分： ? 代表了下面的图片: ? 第六部分： ? 代表了第一句是读取文件的对象,第二句是读取文件的方法....(通过二进制的方式来读取)

2.4K2 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭