<!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. 解析/proc/net/dev

    https://stackoverflow.com/questions/1052589/how-can-i-parse-the-output-of-proc-net-dev-into-keyvalue ...

  2. python初认识、基础数据类型以及 if 流程控制

    python初认识 CPU.内存.硬盘以及操作系统之间的关系 CPU:中央处理器,计算机的逻辑运算单元 硬盘:长期存储数据的地方,断电不会丢失 内存:位于CPU与硬盘之间,缓解高速CPU与低速硬盘之间 ...

  3. 32. Springboot 系列（八）动态Banner与图片转字符图案的手动实现

    使用过 Springboot 的对上面这个图案肯定不会陌生,Springboot 启动的同时会打印上面的图案,并带有版本号.查看官方文档可以找到关于 banner 的描述 The banner tha ...

  4. springboot11-security02FromDB 权限管理（用户信息和角色信息保存在数据库）

    <h4>场景</h4> <h4>代码</h4> springboot+springsecurity+mysql(jpa)实现: 1.pom依赖: < ...

  5. mysql插入记录INSERT与多表更新

    1.第一种:INSERT [INTO] tbl_name[ (col_name, ... ) ]  {VALUES | VALUE}({expr |default}, ... ), (...), .. ...

  6. hashMap源码解析（五）

    ---恢复内容开始--- 首先抛出一个问题: 为什么hashMap一般使用String作为key? 这是我学习前辈们的博文时看到的一个问题,觉着很有意思,所以记录下来. 原因1: 我当时的第一反应是: ...

  7. js apply使用

    js中apply方法的使用 1.对象的继承,一般的做法是复制:Object.extend prototype.js的实现方式是:  Object.extend = function(destinati ...

  8. sqlserver 循环取时间

    declare @str date; set @str='2015-01-08'; while DATEDIFF([day], @str , '2015-02-01')>0 begin sele ...

  9. c# 读取excels

    DataTable ExcelTable;            DataSet ds = new DataSet();            //Excel 文件一般都保存为统一的xls的连接  其 ...

  10. 【转载】java abstract class和interface的区别

    转载:https://blog.csdn.net/b271737818/article/details/3950245 在Java语言中,abstract class和interface是支持抽象类定 ...