<!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. 细说shiro之五：在spring框架中集成shiro

    官网:https://shiro.apache.org/ 1. 下载在Maven项目中的依赖配置如下: <!-- shiro配置 --> <dependency> <gr ...

  2. Retrofit GreenDao开发中遇到的坑

    持续更新中1.使用@FormUrlEncoded的话,服务端需要使用Request.Form,如果不使用@FormUrlEncoded本地需要由 @FieldMap Map<String, Ob ...

  3. deque

    转自:https://www.cnblogs.com/LearningTheLoad/p/7450948.html deque双向开口可进可出的容器 我们知道连续内存的容器不能随意扩充,因为这样容易扩 ...

  4. docker 容器内启动 sshd 启动报错

    创建容器设置密码 安装 openssh-server 启动出错 在容器内 使用 /usr/sbin/sshd -d 启动报错? [root@9d41c7f36c5e tmp]# /usr/sbin/s ...

  5. 嵌入式4412开发板学习知识-Linux系统基础知识

    1. 什么是Linux系统编程 Linux系统编程分为三个部分:系统调用.C库和C编译器. 系统调用系统编程的基础是系统调用,也结束于系统调用.在带有操作系统的嵌入式开发中,需要从操作系统申请一些服务 ...

  6. CSS面试复习（一）：HTML强化

    1. HTML常见元素和理解 head类 meta:字符集.base:路径. a[href,target] img[src,alt] table td[colspan,rowspan] form[ta ...

  7. Android RecyclerView 瀑布流滑动到最后自动加载更多

    mRecycleView.setOnScrollListener(new RecyclerView.OnScrollListener(){ //用来标记是否正在向最后一个滑动,既是否向下滑动 bool ...

  8. 2017 ACM/ICPC（西安）赛后总结

    早上8:00的高铁,所以不得不6点前起床,向火车站赶……到达西安后已经是中午,西工大距离西安北站大概3小时车程的距离,只好先解决午饭再赶路了……下午3.30的热身赛,一行人在3.35左右赶到了赛场,坐 ...

  9. 【防坑指南】nginx重启后出现[error] open() “/usr/local/var/run/nginx/nginx.pid” failed

    重新启动nginx后,出现报错,原因就是下没有nginx文件夹或没有nginx.pid文件,为什么会没有呢? 原因就是每次重新启动,系统都会自动删除文件,所以解决方式就是更改pid文件存储的位置, 打 ...

  10. php编程 之 php基础二

    1,if...else...语句 规则简介: if 语句 - 在条件成立时执行代码 if...else 语句 - 在条件成立时执行一块代码,条件不成立时执行另一块代码 if...elseif....e ...