开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js+树形菜单效果

要在JavaScript中实现树形菜单效果，你可以使用HTML、CSS和JavaScript来构建一个交互式的树形结构。以下是一个简单的实现示例：

HTML结构

<ul id="treeMenu">
    <li>
        <span class="toggle">+</span> <span class="menu-label">菜单1</span>
        <ul class="sub-menu">
            <li><span class="menu-label">子菜单1-1</span></li>
            <li><span class="menu-label">子菜单1-2</span></li>
        </ul>
    </li>
    <li>
        <span class="toggle">+</span> <span class="menu-label">菜单2</span>
        <ul class="sub-menu">
            <li><span class="menu-label">子菜单2-1</span></li>
            <li>
                <span class="toggle">+</span> <span class="menu-label">子菜单2-2</span>
                <ul class="sub-menu">
                    <li><span class="menu-label">子菜单2-2-1</span></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS样式

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

.sub-menu {
    display: none;
    list-style-type: none;
    padding-left: 20px;
}

.toggle {
    cursor: pointer;
    margin-right: 5px;
}

JavaScript交互

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

    toggles.forEach(function(toggle) {
        toggle.addEventListener('click', function() {
            var subMenu = this.nextElementSibling.nextElementSibling;
            if (subMenu.style.display === 'none' || subMenu.style.display === '') {
                subMenu.style.display = 'block';
                this.textContent = '-';
            } else {
                subMenu.style.display = 'none';
                this.textContent = '+';
            }
        });
    });
});

解释

HTML: 创建了一个嵌套的无序列表来表示树形菜单结构。每个可展开的菜单项前都有一个span元素作为切换按钮。
CSS: 设置了基本的样式，其中.sub-menu默认是隐藏的，.toggle用于显示切换按钮。
JavaScript: 当文档加载完成后，为每个切换按钮添加点击事件监听器。点击时，切换相应子菜单的显示状态，并改变切换按钮的符号。

优势

交互性: 用户可以展开和折叠菜单，提高用户体验。
可扩展性: 可以轻松添加更多的菜单项和子菜单。
简洁性: 使用简单的HTML、CSS和JavaScript即可实现。

应用场景

网站导航: 适用于需要多层次导航的网站。
后台管理系统: 管理员可以通过树形菜单快速访问不同的管理功能。
文件浏览器: 显示文件和文件夹的层次结构。

这个基础示例可以根据具体需求进行扩展，例如添加动画效果、键盘导航支持、动态加载菜单项等。

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

有帮助

没帮助

相关·内容

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

效果图：本次制作要点： html：结构上，要把li内部的文字和待展开的元素分开来，便于后期样式上的把控和逻辑上的处理。... 88 89 90 css 样式上：通过一个cur类名，来控制后期的所有选中的效果...; 81 } 82 83 .sec-class > li:hover { 84 color: #fff; 85 } js 逻辑上：这次遇到用 “is()” 函数判断列表是否展开，但是未知原因不起效果

4.9K5 0

js树形菜单

DOCTYPE html> 树形菜单 <link rel="stylesheet...background-repeat: no-repeat; } /*.test{display: block;background-repeat: no-repeat;}*/ 第三部：JS设计 /*树形菜单.../img/sub.jpg)'; } window.onload=init; 效果如下：

591 0

TreeTable树形菜单

var table= { id: “treeTable”, table: null, layerIndex: -1 }; /**

2.3K5 0

bootstrap树形菜单原

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

3.7K2 0

zTree实现树形结构菜单

文章目录一、简介二、前端渲染效果三、实现步骤 1、数据库表结构 2、引入zTree插件 3、树形结构实体类SysModule 4、表示层代码 5、js渲染部分 1、树初始化配置 2、加载数据树...二、前端渲染效果三、实现步骤 1、数据库表结构 2、引入zTree插件 <link rel="stylesheet" href="/ccms/commons/jslib/ztreeV3.5.15...<script type="text/javascript" src="/ccms/commons/jslib/js-gmxt-define/ztreeTool.js"> 3、树形结构实体类...private String parentCode; /**是否为叶子节点*/ private int isLeaf; /**同级排序编号*/ private int sortNumber; } 树形结构辅助类...userCode=#{userCode})") List getmoduleCodes(@Param("userCode") String userCode); // 获取树形结构所有父节点

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就是这样一层一层嵌套下去，这样就可以实现无限级的树形菜单...这是一个很简单的树形菜单，首先开始的在后台将数据库中的数据查询出来，前台就初始化这个树，通过url请求到数据，然后就在页面加载事件初始化这个树。...下面就是效果图： ?

3K1 0

ztree+json，渲染树形菜单

专门适合项目开发,尤其是树状菜单、树状数据。...ztree官方文档：http://www.treejs.cn/v3/api.php ---- 现在写了一个小的demo，具体可以参考官方文档，从文档上拿来一串json数据，放在前端的代码里面，方便大家查看效果...$.fn.zTree.init($("#sys"), setting, nodes); }); 在浏览器里面打开，效果如图所示...background: #0b2b5f;"> //树形菜单

2.2K3 1

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

简单的树形菜单如何写

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

2.3K4 1

非递归实现树形下拉菜单

非递归实现树形下拉菜单博主默语带您 Go to New World....好的，我会更详细地讲解非递归实现树形下拉菜单的完整思路和代码，同时为每一部分都加上清晰的注释，让初学者也能看懂。这次我们会以逐步实现的方式讲解每一步的逻辑。...非递归实现树形下拉菜单什么是非递归实现？在递归中，函数会自己调用自己。非递归实现是用队列（Queue）或栈（Stack）来替代函数调用栈，从而手动管理需要处理的数据，逐步完成任务。...我们需要将这些分类转化为树形结构。 2....当队列为空时，树形结构已完成。

921 0

C# 用树形列表动态显示菜单

bool Var_Bool = true; for (int i = 0; i 菜单项...{ //将一级菜单项的名称添加到TreeView组件的根节点中，并设置当前节点的子节点newNode1 TreeNode...Var_Bool = true; } newNode1.Tag = 0;//标识，有子项的命令项 //将当前菜单项的所有相关信息存入到...{ //将二级菜单名称添加到TreeView组件的子节点newNode1中，并设置当前节点的子节点newNode2...Tag.ToString());//标识，显示相应的窗体 } } //将当前菜单项的所有相关信息存入到

3831 0

Flutter TolyUI 框架#05 | 树形菜单设计

一、树形菜单设计思考树形是一种非常自然而常见结构，它可以展示大量具有自相似的信息。...子区域的偏移也能更好的展示树形的层次结构。本文将探讨 TolyUI 在树形导航菜单中的设计。 1. 树形菜单设计动机树形菜单是 Flutter 本身不支持的，但在桌面端或 Web 端中是非常常见。...树形菜单的职能树形菜单在交互语义上承担的职能是： [1]. 承载若干个视图元件，并参与交互。 [2]. 视图元件间呈树形组织结构。 [3]. 允许交互时，动画折叠/收起子节点。...下面是 PLCKI 项目导航的树形结构效果，采用了 TolyUI 的默认风格： 3. 树形菜单在使用上的设计树形结构在使用时，最复杂的地方莫过于节点对象的创建。...树形菜单配置参数树形菜单和侧栏菜单类似，可以配置上方和下方区域的组件，以及右侧边线区域，可拉伸面板。

3291 0

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

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

2.4K2 0

VC使用pugixml读取XML树形结构菜单

VC使用pugixml读取XML树形结构菜单一、pugixml的简介 pugixml是一个简单方便的XML操作库，pugixml的官网是：http://pugixml.org/我们在上面可以下载得到最新版本的...的错误，我们只需要在pugixml.cpp最前面引入stdafx.h头文件即可 #include"stdafx.h" 二、XML树形结构菜单 <?...STRING SEPARATOR CString strType; //菜单项名称 CString strName; //菜单项命令 CString strCmd; //菜单项加速键 CString...strChecked = tool.attribute("checked").value(); m_nStrNum++; } } return ret; } 到此这一节使用pugixml读取XML树形结构菜单就完成了...，下一节我们再来研究菜单项的动态添加、响应、加速键及菜单标记的内容。

2723 0

zui动态树形菜单二次渲染

在使用zui树形菜单的过程中，由于需要个性化点击事件，采用的是html拼接字符串后使用 $('#indexTreeMenu').tree();方法渲染，但是在隐藏菜单再次显示后，子菜单的指向箭头图标消失...，示意如下正常情况：隐藏整个菜单再重新填充html后：查看源码tree事件发现会对渲染过后的树初始化数据对象修复这一问题的办法是在渲染之前重置Tree的data对象，可以真正进行二次渲染

1842 0

SpringMVC+ZTree实现树形菜单权限配置

计划在开源项目里加入权限配置的功能，打算加入zTree实现树形结构。...Id**/ private int menuId; /** 上级Id**/ private int parentId; /** 菜单名称**/ private...String menuName; /** 菜单图标**/ private String menuIcon; /** 菜单URL**/ private String...menuUrl; /** 菜单类型**/ private String menuType; /** 菜单排序**/ private String menuOrder;...model.addAttribute("menus",json); return "admin/role/role_auth"; } 在前端通过zTree实现树形菜单展示

2.7K3 0

基础平台项目之树形菜单权限配置实现

计划在开源项目里加入权限配置的功能，打算加入zTree实现树形结构。...date 2017年3月17日 */ @Table(name="sys_menu") @Entity public class Menu implements Serializable { /** 菜单...; /** 菜单图标**/ private String menuIcon; /** 菜单URL**/ private String menuUrl; /** 菜单类型**/ private...String menuType; /** 菜单排序**/ private String menuOrder; /**菜单状态**/ private String menuStatus;...model.addAttribute("menus",json); return "admin/role/role_auth"; } 在前端通过zTree实现树形菜单展示

2.2K3 0

级联下拉菜单效果

2级菜单 2级菜单 2级菜单 2级菜单 ...="">2级菜单 2级菜单 ...="">2级菜单 2级菜单 ...2级菜单 2级菜单 <li

4.8K15 0

Entity Framework Core如何实现读取Tree树形权限菜单

一、课程介绍在如今流行的前后分离项目中，前端的菜单都是通过后端的API进行获取进行动态加载的，那么今天阿笨给大家分享一下如何使用Entity Framework Core来实现读取Json格式的Tree...树形权限菜单，麻雀虽小五脏俱全，废话不多说，直接上干货。...本次分享课程包含知识点如下: 1）、EF Core开启自动迁移，并批量生成权限菜单数据。...2）、获取所有的菜单数据。访问：http://localhost:5000/menu/all ?...3）、获取指定编号的菜单数据访问：http://localhost:5000/menu/10 ?

1.8K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭