本帖最后由 Grayson.Shang 于 2024-8-5 17:29 编辑
从标题上，大家就可以了解到这个帖子的内容是做什么了。
展开到指定层级，不知道大家是否陌生，其实活字格用的时间长了，应该会对这个功能有印象，但未必知道具体是哪里有使用到。
揭晓答案，那就是树形图
而菜单中，并没有这个功能，不过没有这个功能也是可以理解的，因为一般情况下为了样式的好看，菜单并不推荐在页面初始就展开，不过既然都有全部展开这个功能了，也就会有格友使用，那么当层级比较多，比如层级超过3个时，对客户的体验并不友好，那就就会用到这个展开到指定层级。
废话不多说，直接看看如何实现这个功能。
1、将菜单的展开折叠设置为，“全部收起”
2、给需要设置的菜单先设置上对应的CSS类名，比如设置“mytest”
3、在页面加载命令中（若是菜单在母版页也是可以的），增加一个JavaScript命令，内容如下
- let className = "mytest";
- let level = 2;
- for(i = 0; i < level - 1; i++) {
- let $lis = $(`.${className} ul[level=${i}]>li`);
- // 设置标签状态
- let $a = $lis.children("a");
- $a.attr("isexpand", true);
- // 更改图片状态，添加class down
- $a.children("i").addClass("down");
- // 设置子标签显示
- let $ul = $lis.children("ul");
- $ul.css("display", "");
- }
- 当前层级菜单的展开状态
- 当前菜单的展开图片状态
- 子菜单的是否隐藏状态
这样就可以达成在页面加载完成后，是菜单展开到指定节点了，可以通过修改JS，开始的两个变量值，动态设置展开的指定层级
最终效果如下
|
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图
