Layui二级菜单优化

Layui二级菜单优化刚开始学习layui框架,碰到一个缺陷是二级菜单每次点击都会收缩到原始状态。用 Request.Url.ToString();获取URL判断点击页面前哪些节点是展开的,添加class=\"layui-nav-itemlayui-nav-itemed\">(展开子节点)解决了。代码如下:for(vari=0;i<data.length;i++){…

大家好,又见面了,我是你们的朋友全栈君。

刚开始学习layui框架,碰到一个缺陷是二级菜单每次点击都会收缩到原始状态。用 Request.Url.ToString();获取URL判断点击页面前哪些节点是展开的,添加class=\”layui-nav-item layui-nav-itemed\”>(展开子节点)解决了。代码如下:

       for (var i = 0; i < data.length; i++) {
                            //添加头栏目
                            if (data[i].children.length > 0) {
                                var curFocus = null;
                                var curUrl = '@Request.Url.ToString()';
                                var hasFocusParent = null;
                                var clickTree = null;
                                for (var j = 0; j < data[i].children.length; j++) {
                                    if (curUrl.lastIndexOf(data[i].children[j].href) > 0) {
                                        clickTree = data[i].children[j].id;
                                        hasFocusParent = data[i].id;
                                    }
                                };
                                if (hasFocusParent == data[i].id) {
                                    item += "<li class=\"layui-nav-item layui-nav-itemed\">  <a href=\"javascript:;\">" + data[i].name + "</a><dl class=\"layui-nav-child\">";
                                    //class=\"layui-nav-item layui-nav-itemed\">展开子节点
                                }
                                else {
                                    item += "<li class=\"layui-nav-item\"><a href=\"javascript:;\">" + data[i].name + "</a><dl class=\"layui-nav-child\">";
                                }
                                for (var j = 0; j < data[i].children.length; j++) {
                                    if (data[i].children[j].id == clickTree) {

                                        item += "<dd style=\"background-color: #009688\"><a href=\"" + data[i].children[j].href + "\">" + data[i].children[j].name + "</a></dd>";

                                    } else {
                                        item += "<dd><a href=\"" + data[i].children[j].href + "\">" + data[i].children[j].name + "</a></dd>";
                                    }
                                };
                                item += "</dl></li>";
                            } else {
                                item += "<li class=\"layui-nav-item\"><a href=\"" + data[i].href + "\">" + data[i].name + "</a></li>";
                            }
                        };

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/146209.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • python是什么?python能做什么?

    python是什么?python能做什么?人生苦短,我用python。python是什么?Python是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。python语言有以下特点:易于学习。Python有相对较少的关键字

    2022年7月6日
    25
  • ubuntu18.04安装opencv教程_Ubuntu18安装opencv

    ubuntu18.04安装opencv教程_Ubuntu18安装opencv最近opencv3.4.1发布了,想换个新的试试鲜,于是把配置的过程通过博文的方式记录下来,方便查阅。本教程原为3.3.0,但经过博主亲测,3.4.0、3.4.1皆适用1.去官网下载opencv,在本教程中选用的时opencv3.4.1,其他版本的配置方法异曲同工。下载链接http://opencv.org/releases.html,选择sources版本2.解压下…

    2022年9月1日
    5
  • Istio组件日志设置[通俗易懂]

    1.istio-pilot日志级别编辑istio-system.deployment.istio-pilot,修改args中–log_output_level=default:指定日志级别2.istio-policy日志级别设置同istio-pilot3.istio-proxy(envoy)日志级别设置进入istio-proxy容器中,通过如下命令进行设置:curl-…

    2022年4月18日
    51
  • golang ipc 通信_golang 2.0

    golang ipc 通信_golang 2.0NTP(NetworkTimeProtocol,网络时间协议)是由RFC1305定义的时间同步协议,用来在分布式时间服务器和客户端之间进行时间同步。NTP基于UDP报文进行传输,使用的UDP端口号为123。使用NTP的目的是对网络内所有具有时钟的设备进行时钟同步,使网络内所有设备的时钟保持一致,从而使设备能够提供基于统一时间的多种应用。对于运行NTP的本地系统,既可以接收来自其他时钟…

    2022年10月12日
    1
  • QT断点调试[通俗易懂]

    QT断点调试[通俗易懂]这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML图表FLowchart流程图导出与导入导出导入欢迎使用Ma…

    2022年5月21日
    682
  • Eclipse使用Maven创建Web时错误:Could not resolve archetype org.apache.maven.archetypes:maven-archetype-webap

    Eclipse使用Maven创建Web时错误:Could not resolve archetype org.apache.maven.archetypes:maven-archetype-webap问题描述:使用Eclipse自带的Maven插件创建Web项目时报错:Couldnotresolvearchetypeorg.apache.maven.archetypes:maven-archetype-webapp:RELEASEfromanyoftheconfiguredrepositories.Couldnotresolveartifa

    2022年7月24日
    9

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号