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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • git commit后_git回退已经push的代码

    git commit后_git回退已经push的代码Git 返回 commit 内容

    2022年4月21日
    73
  • Flume和Kafka的区别与联系「建议收藏」

    Flume和Kafka的区别与联系「建议收藏」目录区别点一:区别点二:同样是流式数据采集框架,flume一般用于日志采集,可以定制很多数据源,减少开发量,基本架构是一个flume进程agent(source、拦截器、选择器、channel<MemoryChannel、FileChannel>、sink),其中传递的是原子性的event数据;使用双层Flume架构可以实现一层数据采集,一层数据集合;Flu…

    2022年6月23日
    31
  • NTP时间服务器搭建「建议收藏」

    1.yuminstallntpntpdate安装NTP服务器2.NTP服务器配置:修改配置文件vi/etc/ntp.conf3./etc/init.d/ntpdrestart重启服务4.ntpq-p查看状态5.date查看当前时间6.客户机同步时间ntpdatepool.ntp.org(pool.ntp.org为服务机ip地址,pool.ntp.o…

    2022年4月7日
    39
  • Connecting to a eXtremeDB「建议收藏」

    Connecting to a eXtremeDB「建议收藏」TheeXtremeDBODBCdrivercanconnecttoaneXtremeDBdatabaseintwomanners.Thefirst(whichwerecommended)assumesthatthedriveractslikeaRemoteSQLclient.Thisisathinclientthatserializ

    2022年10月14日
    4
  • use ida6.8 + windbg on win10[通俗易懂]

    use ida6.8 + windbg on win10[通俗易懂]序用ida6.8pro+windbgx64调试x64的pip.exe,说找不到windbg.我已经装了一个从csdn下载的windbgx64-v6.x.找资料,说要修改ida.cfg,添加IDA环境变量DBGTOOLS为x86版的windbg路径。尝试在dbg_windbg.cfg中添加DBGTOOLS,IDA启动时说在dbg_windbg.cfg中的DBGTOOLS环境

    2022年6月2日
    50
  • java面试题笔试题_外贸函电考试题和答案

    java面试题笔试题_外贸函电考试题和答案声明:有人说,有些面试题很变态,个人认为其实是因为我们基础不扎实或者没有深入。本篇文章来自一位很资深的前辈对于最近java面试题目所做的总结归纳,有170道题目,知识面很广,而且这位前辈对于每个题都自己测试给出了答案,如果你对某个题有疑问或者不明白,可以电脑端登录把题目复制下来然后发表评论,大家一起探讨,也可以电脑端登录后关注我给我发私信,我们一起进步!以下内容来自这位前辈2013年年底的…

    2025年8月30日
    6

发表回复

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

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