开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用js实现树状菜单

树状菜单是一种常见的用户界面元素，用于展示层次结构的数据。在JavaScript中实现树状菜单可以通过多种方式，包括使用递归、DOM操作和事件处理。下面是一个简单的示例，展示如何使用JavaScript和HTML实现一个基本的树状菜单。

基础概念

树状菜单通常由节点组成，每个节点可以有子节点。用户可以展开或折叠节点以查看或隐藏其子节点。这种结构有助于组织和导航复杂的数据集。

实现步骤

HTML结构：创建一个基本的HTML结构来表示树状菜单。
CSS样式：添加一些基本的CSS样式来美化菜单并控制展开/折叠效果。
JavaScript逻辑：编写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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="treeMenu">
        <ul>
            <li>
                <span class="node">Node 1</span>
                <ul>
                    <li><span class="node">Node 1.1</span></li>
                    <li><span class="node">Node 1.2</span></li>
                </ul>
            </li>
            <li>
                <span class="node">Node 2</span>
                <ul>
                    <li><span class="node">Node 2.1</span></li>
                    <li><span class="node">Node 2.2</span>
                        <ul>
                            <li><span class="node">Node 2.2.1</span></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

#treeMenu ul {
    list-style-type: none;
    padding-left: 20px;
}

.node {
    cursor: pointer;
}

.node::before {
    content: "+ ";
}

.node.expanded::before {
    content: "- ";
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const nodes = document.querySelectorAll('.node');

    nodes.forEach(node => {
        node.addEventListener('click', function(event) {
            event.stopPropagation();
            const ul = this.nextElementSibling;
            if (ul && ul.tagName === 'UL') {
                ul.style.display = ul.style.display === 'none' || ul.style.display === '' ? 'block' : 'none';
                this.classList.toggle('expanded');
            }
        });
    });
});

优势

清晰的层次结构：树状菜单能够清晰地展示数据的层次关系。
用户友好：用户可以通过简单的点击操作展开或折叠节点，便于导航。
灵活性：可以轻松地添加、删除或修改节点，适应不同的数据需求。

应用场景

文件管理系统：展示文件夹和文件的层次结构。
组织架构图：展示公司或团队的层级关系。
设置菜单：在软件或网站中提供多层次的设置选项。

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

性能问题：如果树状菜单非常庞大，可能会影响页面性能。可以通过懒加载（只在需要时加载子节点）来优化性能。
样式冲突：确保CSS选择器具有足够的特异性，以避免与其他样式冲突。
事件冒泡：使用event.stopPropagation()防止点击事件冒泡到父元素，导致不必要的展开/折叠操作。

通过上述步骤和代码示例，你可以实现一个基本的树状菜单。根据具体需求，你可以进一步扩展和定制功能。

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

有帮助

没帮助

相关·内容

项目实践，实现一个简单前端js树状竖型风格导航菜单

在项目开发过程中，有时候会遇到一些需要开发人员实现的一些js效果，大公司会有专业的前端设计人员设计界面，而小公司可能就需要后端开发工程师自己来实现，下面是一个我用过的一个js树状竖型风格导航菜单代码。...2.熟练使用SQL语法及mysql或oracle、sql server数据库应用开发； 3.熟练运用 js、html、css 等前端开发技术； 4.熟悉tomcat、jetty等服务器软件； 5.良好的工作态度...环境准备：下载jQuery 可以使用jQuery文件的压缩和未压缩副本。最好在开发或调试过程中使用未压缩的文件。压缩文件可以节省带宽并提高生产性能。...您也可以下载源映射文件，以在使用压缩文件进行调试时使用。映射文件没有要求用户运行jQuery的，它只是提高了开发人员的调试经验。先看效果： ?.../1999/xhtml"> 导航菜单特效

2K1 0

ASP.NET中使用TREE VIEW控件实现树状下拉菜单

web.sitemap的代码: ?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="h...

1.1K1 0

树状图js的实现方法

本文是基于决策树的需求做的前期demo实现，所以以二叉树为实现目标。基本术语如下：二叉树 1、二叉树中的节点最多只能有两个子节点，一左一右。

4K2 0

自写JQ控件-树状菜单控件

一个多月没有写博客了，最近也弄一个基于JQ的树状菜单控件，在此分享给大家。另外呢，通过这个例子分享一下怎么写JQ控件的。...事实上工作中，也是经常遇到的，有些时候自己想实现一些前端效果，用网上一些插件吧，很强大，但是一些样式可能不是你想要的，改起来牵一发而动全身。这种情况自己写控件会好一些。...真正使用的时候，后台只需要传data到前端，加载到页面就ok了。这里面依赖了JQuery、XBGMenuTree.css、XBGMenuTree.js。 JQuery文件没什么好说的。...样式可能会比较好理解一些，就是一些初始背景颜色、鼠标放过去的样式、被选中的样式、缩进、子菜单字体等等。所以不多介绍了。主要js可能需要解释一下。...在XBGMenuTree.js有大量使用到，理解其含义，自然可以理解到其精妙之处。虽然this随着函数使用场合的不同，this的值会发生变化。

1.9K3 0

js代码实现下拉菜单

效果 js代码： function ShowSub(li) {//函数定义 var subMenu = li.getElementsByTagName

8.3K3 0

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

原生JS实现苹果菜单栏

分享一个由原生JS实现的苹果菜单栏效果，效果如下：实现的代码如下：原生JS...实现苹果菜单栏 body { margin: 0; } #div0 {...var dis = Math.sqrt(a * a + b * b); //用当前连线距离除以100与1求差 //实现鼠标相对于图片越近比例越大

6.9K1 0

js控制json生成菜单——自制菜单

js控制json生成菜单——自制菜单（一）此文档解决以下问题： 1.JSON文件的书写方式 2.jQuery.getJSON()的运用 3.jQuery.each()的运用 4.jQuery的DOM... js/jquery..._3.3.1_jquery.min.js"> js/navtab.js"> ...4子1", "navUrl": "test.html", "navParentId": 9 } ] 1 $(function() {3.navtab.js...//一级菜单项可以滑动显示或隐藏子菜单项 //同时，当前菜单显示，则其他都隐藏 $("." + data[i]["navId

3322 0

js list数据转树状层级 JSON，递归生成树状层级 JSON

<!DOCTYPE html> <html> <head> <script> var data=[ {"id":"aaa","parentId":"accoun...

10.8K5 0

使用SWRevealViewController实现侧滑菜单

1.导入SWRevealViewController 由于该库是用OC写的,所以在swift上使用还需要一些步骤； 1.1 下载SWRevealViewController到本地，然后打开SWRevealViewController...xocde就会自动弹出个框，询问你是否创建OC bridging header文件，这里选择 Create Bridging Header；苹果官方推荐通过header file文件来让Swift项目使用...2.使用SWRevealViewController (storyboard方式) 2.1 拖拽一个新的View Controller到面板上,并设置class 为SWRevealViewController...不放， 2.2.2 拖动到该菜单ViewController,松开鼠标会出现一个选择面板 2.2.3 选择 reveal view controller set controller 2.2.4...，不知道是什么原因 2.4 在代码设置SWRevealViewController的一些属性和滑动事件 //侧滑菜单 if(self.revealViewController() !

1K2 0

Js实现原生二级菜单「建议收藏」

device-width, initial-scale=1.0"> 二级菜单.../tools.js"> var spans = document.getElementsByTagName('span'); //获取span标签 var opendiv...opendiv,'fold'); menutoggle(opendiv); } opendiv = clickdiv; } } /* 定义菜单切换以及动画效果

6.7K1 0

R中极树状图实现

极树状图类似于系统发育图或者环形的聚类图，其效果如下图所示：查了一下相关资料，可以通过以下两种方法实现。以下用mtcars数据为例。

1.4K1 0

使用递归实现地址数据菜单

思路先获取一级菜单，对每个一级菜单设子区域。如果子区域还有子区域，就递归查询，直到查不到子区域返回。递归的核心就是在方法中设置一个返回条件，防止无限递归下去。

6273 0

使用递归实现地址数据菜单

思路先获取一级菜单，对每个一级菜单设子区域。如果子区域还有子区域，就递归查询，直到查不到子区域返回。递归的核心就是在方法中设置一个返回条件，防止无限递归下去。

1314 0

Fabric.js 右键菜单

本文主要关注 Fabric.js 的主要 api 有： fireRightClick：允许右键点击 stopContextMenu：禁用默认右键菜单 mouse:down：鼠标点击事件如果不知道 Fabric.js...的同学，可以看《Fabric.js 从入门到___》本案例是使用原生方式开发，不基于 Vue 、React 等框架，所以不用太担心运行环境等问题。...，菜单在鼠标左侧，菜单在鼠标上方，菜单在鼠标下方）；左键单击画布其他地方，隐藏菜单；实现思路：创建画布；创建 “菜单” 的DOM元素；去官网查找 “右键相关事件”；右键单击在元素上，根据鼠标离画布边缘的距离...，计算菜单要显示的位置；左键单击在画布上，隐藏菜单；实现查文档在上面的思路中，其实难点只有 “右键相关事件” 。...如果你的项目需求是右键点击画布也展示不同菜单，你可以修改上面代码的判断。代码仓库原生方式实现Fabric右键菜单在Vue3中使用Fabric实现右键菜单功能

7.1K1 0

原生js实现二级联动下拉列表菜单

二级联动下拉列表菜单的难点在于对后台返回的数据进行解析，不多逼逼，直接上代码 ?...上图是后台返回的数据实现代码如下： var deviceNotExist = true;//防止数据重复 if(data.code == 0) { //查询成功 var param = data.content...jssj + ">" + mulArr[1][0][i].kssj + "-" + mulArr[1][0][i].jssj + ""); } //选择下拉框列表内容时下面的列表实现联动

12.2K2 0

java使用递归实现三级菜单

java使用递归实现三级菜单 javaCopy codeimport java.util.*; public class Menu { private static Map菜单数据使用一个 Map 存储，键为一级菜单项，值为该菜单项下的二级菜单列表。在 main 方法中调用 printMenu 方法开始执行程序。...printMenu 方法循环等待用户输入一级菜单项，如果输入无效则重新提示用户。如果输入有效，则调用 `printSubMenu方法打印该一级菜单项的二级菜单。...如果用户选择了一个有效的二级菜单项，则调用 printSubSubMenu 方法打印该二级菜单项的三级菜单。 printSubSubMenu 方法同样循环等待用户输入三级菜单项或返回上一级。...在这个示例中，三级菜单项是固定的，因此只需要打印三个选项。如果用户选择了一个有效的三级菜单项，则显示所选项的信息。在这个示例中，使用了递归方法来实现三级菜单的显示。

1.5K6 0

24.QTableView函数使用,右击菜单实现

:BackgroundRole 8 设置模型数据的背景色(QBrush) Qt::ForegroundRole 9 设置模型数据的前景色,比如字体(QBrush) 实现右击菜单...当用户在QTableView视图里右击鼠标时,便会触发一个QEvent::ContextMenu类型的事件,所以通过事件过滤器来实现右击菜单效果步骤: 定义菜单对象(QMenu) 通过QMenu的addAction...添加子项,并连接到槽函数定义事件过滤器,判断是否是QTableView的QEvent::ContextMenu事件判断成功,则调用menu.exec(cursor().pos()),在当前鼠标位置打开菜单...view.installEventFilter(this); menu.addAction("删除",this,SLOT(onDelete())); //设置菜单项...view.currentIndex().isValid()==true) { menu.exec(cursor().pos()); //在当前鼠标位置上运行菜单

1.9K4 0

vue 菜单实现

主要实现鼠标移到主菜单，另一个div显示子菜单，采用mouseenter和mouseleave结合,不要使用mouseout,因为mouseout在大div中有子元素，在子元素也会触发mouseout

6512 0

实现滑动菜单

所谓的滑动菜单就是将一些菜单选项隐藏起来，而不是放置在主屏幕上，然后可以通过滑动的方式将菜单显示出来。这种方式既节省了屏幕空间，又实现了非常好的动画效果。下面我们实现一个相对基本的滑动菜单。...参考文献：《第一行代码（第2版）》主要内容 ---- 1.使用DrawerLayout控件搭建基础框架 2.使用NavigationView优化滑动菜单页面步骤概要 ---- 1.使用DrawerLayout...2.使用NavigationView优化滑动菜单页面 NavigationView是Design Support库中提供的一个控件，它可以将滑动菜单页面的实现变得非常简单。...接下来我们实现一下这个控件， NavigationView是Design Support库中提供的，那么我们需要将这个库引入到项目中才行，如图中32-33行：注：Sync的时候可能会出错，这时候添加如...其中CircleImageView是一个开源项目，它可以用来轻松实现图片圆形化： 2.2 在开始使用NavigationView之前，我们需要准备好两个东西： 1）menu。

1.7K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭