开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js无限分类折叠菜单

基础概念

无限分类折叠菜单是一种常见的前端交互设计，用于展示层级结构的数据。它允许用户通过点击展开或折叠子菜单项，从而清晰地查看和管理多层次的分类信息。

相关优势

用户体验：用户可以轻松地浏览和查找所需信息，无需滚动整个列表。
空间效率：通过折叠不常用的菜单项，可以节省屏幕空间，使界面更加整洁。
动态加载：对于数据量较大的情况，可以实现按需加载，提高页面性能。

类型

静态菜单：菜单结构在页面加载时就已经确定。
动态菜单：菜单结构根据用户操作或后台数据动态生成。

应用场景

网站导航：如电商平台的商品分类。
管理系统：如权限管理、角色管理等。
文档库：如技术文档的分类展示。

示例代码

以下是一个简单的JavaScript实现无限分类折叠菜单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无限分类折叠菜单</title>
    <style>
        ul {
            list-style-type: none;
            padding-left: 20px;
        }
        .menu-item {
            cursor: pointer;
        }
        .submenu {
            display: none;
        }
    </style>
</head>
<body>
    <ul id="menu">
        <!-- 示例数据 -->
        <li class="menu-item">菜单1
            <ul class="submenu">
                <li class="menu-item">子菜单1-1</li>
                <li class="menu-item">子菜单1-2</li>
            </ul>
        </li>
        <li class="menu-item">菜单2
            <ul class="submenu">
                <li class="menu-item">子菜单2-1
                    <ul class="submenu">
                        <li class="menu-item">子菜单2-1-1</li>
                    </ul>
                </li>
                <li class="menu-item">子菜单2-2</li>
            </ul>
        </li>
    </ul>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const menuItems = document.querySelectorAll('.menu-item');

            menuItems.forEach(item => {
                item.addEventListener('click', function(event) {
                    event.stopPropagation();
                    const submenu = this.querySelector('.submenu');
                    if (submenu) {
                        submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
                    }
                });
            });
        });
    </script>
</body>
</html>

遇到问题及解决方法

问题1：菜单展开/折叠不正常

原因：可能是事件冒泡导致的多次触发，或者是CSS样式设置不正确。

解决方法：

使用event.stopPropagation()阻止事件冒泡。
确保.submenu的初始样式为display: none;。

问题2：动态加载数据时菜单显示错误

原因：动态加载的数据可能没有正确绑定事件监听器。

解决方法：

在数据加载完成后，重新绑定事件监听器。
使用事件委托机制，将事件监听器绑定到父元素上。

问题3：性能问题（大量数据）

原因：一次性加载大量数据会导致页面卡顿。

解决方法：

使用虚拟滚动技术，只渲染可视区域内的菜单项。
实现懒加载，按需加载子菜单数据。

通过以上方法，可以有效解决无限分类折叠菜单在实际应用中可能遇到的问题。

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

有帮助

没帮助

相关·内容

展开与折叠菜单动画

最简单的展开与折叠菜单，一般是通过切换display属性的none和block的值来实现。但是这样会使得整个过程非常的生硬，内容是一瞬间展示给用户，交互过程感觉不是特别好。...下面通过css动画进行一个展开折叠的操作 css .container{ position: relative; overflow: hidden; width: 400px;...div">展开 js..."折叠" : "展开" document.querySelector(".container").style.height = isShow ? "100px" : "0" } 效果图 ?

3.7K4 1

PHP无限分类

// 如果使用数组, 请使用 getArray方法 $tree->getArray(); // 下拉菜单选项使用 get_tree方法 $tree->get_tree();

1.4K0 0

Element NavMenu 无限级菜单

-- 含有子菜单 --> 0" :key="index" :index="

1.5K3 0

android滑动监听事件折叠菜单

源码地址-homepage libray 这个是用AppBarLayout实现的折叠菜单监听...mPullToRefresh.setCanLoadMore(false); } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) { //折叠状态...Log.e("shaomiaomrootCL", "折叠状态"); mPullToRefresh.setCanRefresh

1.9K2 0

无限级分类数据格式转换（无限级分类树）

无限级分类数据 ---- 本文章中的算法使用的都是以下数据站长源码网 $array = [ 2....使用引用算法转为无限级分类树 ---- $data = getTree($data); /** 收藏 | 0点赞 | 0打赏

1.1K1 0

递归实现无限极菜单

public List<Types> buildTree(List<Types> list) { //父级(总的) List<Types> ty...

5091 0

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

在Vue.js中一个递归组件调用的是其本身，如： Vue.component('recursive-component', { template: `无限深。...基本事件与任何递归函数一样，你需要一个基本事件来结束递归，否则渲染将无限期地继续下去，最终会导致堆栈溢出。在树菜单中，当我们到达一个没有子节点的节点的时候，我们希望停止递归。...app.js文件如下： import TreeMenu from '....来自汇智网（www.hubwiz.com，有很多性价比极高的vue.js内容哦）的小智翻译。

5.1K3 1

CSS实现最简洁的单选折叠菜单

今天教大家用纯css实现一个单选的折叠菜单，不需要JavaScript就能用。折叠菜单和标签页差不多，逻辑上都是一种单选面板，只不过折叠菜单一般是垂直堆叠的，标签页是横着排列。...所以这个折叠菜单的html如下：折叠动画的话，就看需求了，对我来说，没有动画会更清爽一点。...type="radio"]:checked + div { display: block; } 以上就是基本布局，再加上一点其他样式，就成了：但是由于的特性，无法反选，菜单展开后想要折叠只能点别的菜单项...radio) { input.checked = false; window.radio = null; } else window.radio = radio; }; 这样就实现了单选折叠菜单的反选能力

5.3K2 0

laravel生成无限级分类

无限级分类是很常见的功能，算法的好坏对于获取分类树的性能起到决定性的作用。...尤其当分类数据和层级多时，一个糟糕的算法将使服务器不堪重负以下用laravel实现无限级分类功能，包括：数据表设计填充模拟数据生成分类树分类树的后台维护数据表设计字段名描述 id 主键id...name 类目名称 parent_id 父类目 ID is_directory 是否拥有子类目 level 当前类目层级 path 该类目所有父类目 id 为什么要用level与path 无限级分类中...，我们经常需要获取一个分类的所有祖先类目或者后代类目，以及判断两个类目是否存在层级关系。...数据填充结果生成分类树分类树是一个通用的功能，适合将其封装为一个服务，创建CategoryService类

2.9K4 0

PowerBI 无限级菜单目录终极技巧

很多小伙伴反应说已经用罗叔的教程解决了很多 PowerBI 难题并在工作中制作了很多报告，导航也是一个难题，有什么方法可以快速建立导航和菜单系统吗？...虽然罗叔此前已经分享过多次菜单系统的构建方式，但其中是包含了很多手工量的。今天，罗叔给出一种最新的构建方式，让是一劳永逸。...效果预览先来看垂直方向无限级菜单目录 ? 再来看水平方向无限级菜单目录： ?...原理揭秘这里的核心原理是：根据用户选择的菜单内容，来动态计算出目标页面地址并赋给【GO】按钮即可。如下： ?...我们将目标页面的预览图URL存放，在用户选择导航菜单后，就可以看到预览了，非常巧妙。总结本文给出了无限层级菜单的终极方案。该方案可以支持大型系统的构建。赶快动手试试吧。

1.3K3 1

iOS支持展开折叠的弹出菜单（水平方向弹出菜单视图）

2.水平方向弹出菜单视图的应用场景： 2.1、门店商品的支持的功能：向右横向展开视图（操作：下/上架、打印、编辑、同步网络）支持再次折叠隐藏视图 ?...2.2、网店商品目前只包含下架功能：展开折叠视图：（包含上/下架商品功能） ? 竖向弹出菜单视图弹出菜单：会员模块的右上角的下拉菜单（竖向） ?...，还是折叠 #pragma mark - ******** 判断是展开弹出菜单，还是折叠 - (void)expandMenu:(id)x{//点击按钮 self.popmenuView.model...2.水平方向弹出菜单视图的应用场景： 2.1、门店商品的支持的功能：向右横向展开视图（操作：下/上架、打印、编辑、同步网络）支持再次折叠隐藏视图 ?...【点击导航条标题，下拉选择分类】iOS导航条的标题按钮的左侧是分类名称，右边的下拉图标 https://blog.csdn.net/z929118967/article/details/104315227

2.5K1 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

React Native实现手风琴折叠菜单效果

使用了各类手风琴组件，都出现了各类问题。而市面上手风琴效果的第三方组件又不是很多。最终使用的是ant design的手风琴效果，简单高效。

4.5K5 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实现无限操作

注意：执行operator的时候如果最后不是以()结尾（如operator (1)(2)），则这个结果会一直缓存到闭包里。如果下次直接operator (3)(...

1.2K2 0

SpringBoot实现多级分类菜单

SpringBoot实现多级分类菜单在做网站内容分类的时候，我们经常是需要详细到二级分类甚至三级分类的情况。例如京东商城，他也会划分出很多级的分类出来。那么我们应该怎样设计出这样的一个效果呢。...mapper-locations: classpath://mapper/**/*.xml global-config: db-config: id-type: auto 由于我们本次只是想实现分类菜单的方法逻辑而已...* 在这一级别的分类中找下级分类 * * @param root 当前级别的分类 * @param all 全部分类 * @return 下一级分类.../** * 下级分类 */ @TableField(exist = false) private List children; 查找出二级分类甚至三级分类（这里我们使用递归.../** * 递归查找所有的下级分类 * 在这一级别的分类中找下级分类 * * @param root 当前级别的分类 * @param all 全部分类 * @return 下一级分类

9.9K2 1

无限级菜单权限树该如何设计

前言在开发中我们经常会遇到：导航菜单、部门菜单、权限树、评论等功能。这些功能都有共同的特点：有父子关系可无限递归我们以导航菜单为例, 我们将导航菜单设置为动态的, 即从动态加载菜单数据。...适用于数据库存储的设计如下: create table `menus` ( `id` int primary key auto_increment, `name` varchar(20) comment '菜单名称...default 0 comment '父级 ID, 最顶级为 0', `order` int comment '排序, 序号越大, 越靠前' ) 前端渲染对于前端来说, 我们一般需要这种效果: 菜单配置页面...对应的导航菜单: ? 常用的树形显示插件有: JsTree, zTree, Layui Tree, Bootstrap Tree View 等。...附:模板引擎渲染有时我们会使用模板引擎来渲染菜单, 但由于菜单是树形结构的, 所以在模板引擎中单纯的使用 for 是无法完成无限极菜单的渲染的.

5.7K3 1

js无限弹窗及延迟无限弹窗代码

网站无限弹窗，可以用 js 来实现。定时执行 alert() function time(){ alert("Hello!")...; } setInterval("time()",3000);//每隔3秒执行一次无限/死循环 while(true){ alert("");//死循环了...} 如果要延迟3秒，等页面加载后再无限弹窗： function time(){ while(true){ alert("Hello！")

11K1 0

利用JQuery实现左侧菜单栏可折叠功能

今天给大家介绍一下左侧菜单栏可折叠功能，在后台管理中左侧菜单折叠功能是特别常见的一个功能，基本不管是什么类型的管理后台都会涉及到这个功能的实现。...今天给大家介绍的是二级可折叠菜单的功能，相对一级的菜单折叠功能就显得稍微比较复杂一点了，我这里将给大家介绍菜单折叠过程中三种变换形式。...第一种变换形式是：不管点击哪一级菜单都可以打开或者关闭本级菜单，但是不会影响其他级别的菜单： <!...color:#316a91; padding-left:30px;} js...这样左侧折叠菜单的三种状态就都已经实现了，是不是特别简单呀。如果大家想要这个折叠菜单的源代码或者对文章有什么异议都可以加我QQ哦：208017534 欢迎打扰哦！！！

7K7 0

PHP实现无限极分类

导读:说到无限极分类，这个在程序中是常见的一个功能点了。实现的方式也有很多种，今天着重分享一下涉及到数据库的无线分类，可以使用递归处理，也可以使用循环查询数据库处理。..., 0, 'icons/18.gif'), (3, 0, '生活点滴', '记录生活点滴', 0, 'icons/2.gif'), (6, 0, '栀子花开', '青春无限', 0, 'icons/8....'] = getTree($data, $v['cate_Id']); $tree[] = $v; } } return $tree; } // 这里的0就是顶级分类中的

1.2K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭