菜单栏 是顶级ul 里面的根级li ,根级li里面又包含不确定个数的ul,各个ul又包含不确定个数的li,依此递归,li又包含ul,ul包含li等等

快乐起航2020 2021-02-26 10:57:43
菜单栏 是顶级ul 里面的根级li ,根级li里面又包含不确定个数的ul,各个ul又包含不确定个数的li,依此递归,li又包含ul,ul包含li等等 (总而言之,各个主菜单包含不确定的子菜单栏们,子菜单栏们又包含不确定的子菜单栏们
需求: 通过传入id的值直接打开最深层的菜单(即让主菜单到最深层菜单 一条线都保持打开 )
a标签的 onclick="menuClick('module058b5904-b28e-4652-be1a-2667e0792899', '参数类型', pages/datadictionary/parameter_type.html')")是打开菜单栏的点击方法
部分效果图如下:


代码片段如下(#accordion是顶级ul的id)
function openMenu(id) {
console.log(1);
//根据id展开所有父级
var obj = $("#" + id);
//console.log(obj.parents().find("#accordion>li").length);
obj.parents().find("#accordion>li").each(function (i, o) {
$(o).each(function (i1, o1) {

});
});
obj.parent().parent().show();document.getElementById(id).click();//这2行是只有2级菜单时通用
}
如何实现由其他地方传递一个参数id进来 让最深层的a标签到最顶层的菜单栏一路上的菜单都展开 并且背景是亮的(如上图所示)
...全文
308 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
快乐起航2020 2021-03-01
  • 打赏
  • 举报
回复
引用 2 楼 我爱小仙女 的回复:
问题解决了,为了自己能够得分,结贴分数给你了
亦夜 2021-03-01
  • 打赏
  • 举报
回复
将id传进去,然后查询到菜单对象,修改背景颜色并展开ul,然后递归将对象父级传进去,直到父级等于顶级父级为止
我爱小仙女 2021-03-01
  • 打赏
  • 举报
回复
引用 3 楼 快乐起航2020 的回复:
[quote=引用 2 楼 我爱小仙女 的回复:]根据数据渲染菜单列表的时候,应该是知道上下级关系的吧。 组织数据格式类似于下面格式

{
  menuId: 'menu-1', 
  root: true,
  children: [{
    menuId: 'menu-1-1',
    children: [{
      menuId: 'menu-1-1-1',
      isLeaf: true,
     children: []
    }]
  }, {
    menuId: 'menu-1-2',
    children: []
  }]
}
这样可以根据id打开菜单时,可以用递归先找到当前menuId所在目录,再依次往上找就好了,一直到root根目录
孩纸!我的想象应该是js递归而不是json[/quote] 操作数据明显要比操作DOM简单,而且性能高啊,你这要渲染左侧列表,怎么也是要先有数据才能渲染列表的吧。。
快乐起航2020 2021-02-27
  • 打赏
  • 举报
回复
引用 2 楼 我爱小仙女 的回复:
根据数据渲染菜单列表的时候,应该是知道上下级关系的吧。 组织数据格式类似于下面格式

{
  menuId: 'menu-1', 
  root: true,
  children: [{
    menuId: 'menu-1-1',
    children: [{
      menuId: 'menu-1-1-1',
      isLeaf: true,
     children: []
    }]
  }, {
    menuId: 'menu-1-2',
    children: []
  }]
}
这样可以根据id打开菜单时,可以用递归先找到当前menuId所在目录,再依次往上找就好了,一直到root根目录
孩纸!我的想象应该是js递归而不是json
我爱小仙女 2021-02-27
  • 打赏
  • 举报
回复
根据数据渲染菜单列表的时候,应该是知道上下级关系的吧。 组织数据格式类似于下面格式

{
  menuId: 'menu-1', 
  root: true,
  children: [{
    menuId: 'menu-1-1',
    children: [{
      menuId: 'menu-1-1-1',
      isLeaf: true,
     children: []
    }]
  }, {
    menuId: 'menu-1-2',
    children: []
  }]
}
这样可以根据id打开菜单时,可以用递归先找到当前menuId所在目录,再依次往上找就好了,一直到root根目录
快乐起航2020 2021-02-27
  • 打赏
  • 举报
回复
没有人么
下载代码方式:https://pan.quark.cn/s/a4b39357ea24 全国计算机等级考试二级教程《Python语言程序设计》(2018年版)被视为针对Python入门者和备考人员的核心学习材料。该资料汇总了教材内的所有编程练习答案,这些答案在Python 3.5.3环境中经过实际执行测试,从而保障了代码的准确性和应用价值。备考人员借助这些答案,能够评估自身的学习进度,并深入理解和熟练掌握Python编程的基础原理与方法。 1. Python基础理论:Python作为一门高级编程语言,因其简明扼要的语法结构和卓越的功能表现而备受推崇。基础内容涵盖了变量、数据种类(例如整型、浮点型、字符串、布尔型、列表、元组、字典、集合)、逻辑控制(比如条件判断if-else,循环控制for、while)、函数的声明及使用、模块的引入等。 2. Python高级应用:Python的进阶内容涉及异常管理(try-except-finally结构),类与实例(面向对象编程的基础,包含类的构造、对象的生成、属性与方法的运用、继承机制、多态表现),装饰器(用于调整函数或类的功能特性),上下文管理器(借助with语句实现资源管理)等。 3. 数据文件处理:Python配备了全面的文件操作功能,涉及文件的开启、数据读写、关闭操作,以及多种操作模式(例如r模式用于读取,w模式用于写入,a模式用于追加内容等)。此外,还包括文本文件与二进制文件的转换处理,以及文件的位置调整、复制和删除等操作。 4. 标准库的运用:Python的标准库资源极为丰富,比如os模块提供操作系统接口,sys模块用于获取系统参数,random模块可用于生成随机数值,datetime模块负责处...

87,987

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧