<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>.Net海</title>

    <link href="~/layui-v2.2.5/layui-v2.2.5/layui/css/layui.css" rel="stylesheet" />    //注意路劲

    <style>

        ol li a {

            background-color: rgba(,,,) !important;

        }

        .three_this {

            background-color: # !important;

        }

    </style>

</head>

<body class="layui-layout-body">

    <div class="layui-layout layui-layout-admin">

        <div class="layui-header">

            <div class="layui-logo">layui 后台布局</div>

            <ul class="layui-nav layui-layout-left">

                <li class="layui-nav-item"><a href="">控制台</a></li>

                <li class="layui-nav-item"><a href="">商品管理</a></li>

                <li class="layui-nav-item"><a href="">用户管理</a></li>

                <li class="layui-nav-item">

                    <a href="javascript:;">日常</a>

                    <dl class="layui-nav-child">

                        <dd><a href="">邮件管理</a></dd>

                        <dd><a href="">消息管理</a></dd>

                        <dd><a href="">授权管理</a></dd>

                    </dl>

                </li>

            </ul>

            <ul class="layui-nav layui-layout-right">

                <li class="layui-nav-item">

                    <a href="javascript:;">

                        <img src="~/images/tb.png" class="layui-nav-img" />

                        .Net海

                    </a>

                    <dl class="layui-nav-child">

                        <dd><a href="">基本资料</a></dd>

                        <dd><a href="">安全设置</a></dd>

                    </dl>

                </li>

                <li class="layui-nav-item"><a href="">退出</a></li>

            </ul>

        </div>

        <div class="layui-side layui-bg-black">

            <div class="layui-side-scroll">

                <ul class="layui-nav layui-nav-tree" lay-filter="test">

                    <li class="layui-nav-item layui-nav-itemed">

                        <a class="" href="javascript:;">所有商品</a>

                        <dl class="layui-nav-child">

                            <dd>

                                <a href="javascript:;" class="menu_three ">列表一</a>

                                <ol class="layui-nav-child" style="display: none;">

                                    <li><a href="javascript:;">三级列表一</a></li>

                                    <li><a href="javascript:;">三级列表二</a></li>

                                    <li><a href="javascript:;">三级列表三</a></li>

                                    <li><a href="">超链接</a></li>

                                </ol>

                            </dd>

                            <dd><a href="javascript:;" class="menu_three">列表二</a>

                                <ol class="layui-nav-child" style="display: none;">

                                    <li><a href="javascript:;">三级列表一</a></li>

                                    <li><a href="javascript:;">三级列表二</a></li>

                                    <li><a href="javascript:;">三级列表三</a></li>

                                    <li><a href="">超链接</a></li>

                                </ol>

                            </dd>

                            <dd><a href="javascript:;">列表三</a></dd>

                            <dd><a href="">超链接</a></dd>

                        </dl>

                    </li>

                    <li class="layui-nav-item"><a href="">云市场</a></li>

                    <li class="layui-nav-item"><a href="">发布商品</a></li>

                </ul>

            </div>

        </div>

        <div class="layui-body">

            <!-- 内容主体区域 -->

            <div style="padding: 15px;">内容主体区域</div>

        </div>

        <div class="layui-footer">

            <!-- 底部固定区域 -->

            © layui.com - 底部固定区域

        </div>

    </div>

 //注意路劲

    <script src="~/layui-v2.2.5/layui-v2.2.5/layui/layui.js"></script>

    <script>

        //JavaScript代码区域

        layui.use(['element', 'jquery'], function () {

            var element = layui.element, $ = layui.jquery;

            $(".menu_three").on("click", function () {

                $(this).next().toggle();

                $.each($(this).parent().siblings(), function (i, e) {

                    $(e).find("ol").hide();;

                });

            })

            $("ol").on("click", "li a", function () {

                $.each($(this).parent().siblings(), function (i, e) {

                    $(e).find("a").removeClass('three_this')

                });

                $(this).addClass('three_this');                            // 添加当前元素的样式

            })

        });

    </script>

</body>

</html>

layui 左侧三级菜单栏的更多相关文章

  1. js左侧三级菜单导航实例代码

    在左侧三级菜单导航想必大家都见到过吧,它的实现过程也并不复杂,下面有个不错的示例,感兴趣的朋友可以了解下 实例代码:   <!DOCTYPE html PUBLIC "-//W3C// ...

  2. LayUI左侧菜单无法保持选中状态

    1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图 但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...

  3. Python全栈开发记录_第二篇（文件操作及三级菜单栏增删改查）

    python3文件读写操作(本篇代码大约100行) f = open(xxx.txt, "r", encoding="utf-8") 不写“r”(只读)默认是只 ...

  4. layui省市区三级联动城市选择

    基于layui框架制作精美的省市区下拉框三级联动菜单选择, 支持三级联动城市选择,点击提交获取选中值代码. 示例图如下: 资源链接: https://pan.baidu.com/s/1s6l8iDBE ...

  5. layui城市三级联动(fesiong / layarea)

    安装 GitHub下载地址:https://github.com/fesiong/layarea.git 使用(html+js) 1. html部分 整个选择器需要使用一个父标签包裹,如下使用了id= ...

  6. js左侧三级菜单导航代码

    效果演示: 实例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  7. CSS实现左侧多级菜单栏

    首先看要实现的效果, 主要是关心技术实现, 所以没怎么美化 我也是初学html, 所以写的比较啰嗦 1. 使用列表将内容显示出来 <!DOCTYPE html><html>&l ...

  8. ECSHOP后台左侧添加菜单栏

    比如我们在后台中增加 “活动管理”功能,方法如下 在ECSHOP 管理中心共用语言文件 language\zh_cn\admin\commn.php ,添加我们的自定义菜单: $_LANG['17_a ...

  9. 通用后台管理系统UI-AdminLTE：构造动态菜单栏

    AdminLTE是一款基于bootstrap的后台管理系统的通用模板UI,它的样式美观且较为符合大多数后台管理系统的需求,典型的上|左右|下的布局形式.并且提供了一整套我们开发的时候可能用到的UI样式 ...

随机推荐

  1. termux 开启 sshd

    众所周知, termux 上的 sshd 不能通过 IP 连接, 只能使用密钥, 对于使用 PuTTY 的 Windows 用户, 怎么办呢? 由于 PuTTY 支持 telnet, 而 termux ...

  2. showMem.c setMem.c 及其改进

    #ifndef MEMUTIL_H_INCLUDED #define MEMUTIL_H_INCLUDED // Show memory void showMem(void *, unsigned); ...

  3. 计算机网络--HTTP协议

    TCP/IP协议 互联网构建的初衷是信息的共享.在信息的传递过程中,计算机不可避免的需要产生交流.就像我们与别人交谈需要懂得对方的语言才能明白对方表达的意思一样,计算机的交流也需要一个约束了,称之为协 ...

  4. nativefier - 快速把任意网页生成桌面应用程序

    使用前端技术开发桌面应用的技术已经相当成熟了,像早先的 NW.js,如今很火的 Electron 等,都可以轻松实现.今天给大家分享的 nativefier 就是基于 Electron 封装的,可以帮 ...

  5. c++注意易错点

    1.cout采用endl,cin不用endl cin>>a>>b; cout<<a<<b<<endl; 2.函数定义后面不要加分号,完了也没 ...

  6. oracle 对对表匹配的进行修改匹配不上的可以进行新增 (MERGE INTO)

    MERGE语句是Oracle9i新增的语法,用来合并UPDATE和INSERT语句. 通过MERGE语句,根据一张表或子查询的连接条件对另外一张表进行查询, 连接条件匹配上的进行UPDATE,无法匹配 ...

  7. 总结PHP如何获取当前主机、域名、网址、路径、端口和参数等

    //获取域名或主机地址 echo $_SERVER['HTTP_HOST']."<br />"; //获取网页地址 echo $_SERVER['PHP_SELF']. ...

  8. Understanding a project which include NodeJS, Webpack, Vue

    公司有一个web 项目是用 Vue 写的, 前段时间负责这个tool的人离职了没有人维护,其他人又很忙,我就去看了一下以便以后能加一些新功能在上面 没有接触过Vue, 这些理解了一下关系做一些学习记录 ...

  9. python中的Process

    from multiprocessing import Process import time import os # # def acb(n): # print(n) # # # if __name ...

  10. python 的基础 学习 第八天数据类型的补充 ，集合和深浅copy

    1,数据类型的补充: 元组()tuple,如果只有元素,并且没有逗号,此元素是什么数据类型,该表达式就是什么数据类型. tu = ('rwr') print(tu,type(tu)) tu = ('r ...