<!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. tomcat解决GET请求中文参数乱码

    通常,在使用Spring MVC框架的应用程序中,为了解决中文参数乱码的问题,都会添加如下过滤器配置: <filter> <filter-name>encodingFilter ...

  2. maven更新项目版本

    mvn versions:set -DnewVersion=1.0.1-SNAPSHOT // 此操作会生成pom备份文件,推荐使用 mvn versions:set -DnewVersion=1.1 ...

  3. Vue.Draggable/SortableJS 的排序功能，在VUE中的使用

    此插件git: https://github.com/SortableJS/Vue.Draggable 基于Sortable.js http://www.cnblogs.com/xiangsj/p/6 ...

  4. SQL Server进阶（六）表表达式--派生表、公用表表达式(CTE)、视图和内联表值函数

    概述 表表达式是一种命名的查询表达式,代表一个有效地关系表.可以像其他表一样,在数据处理中使用表表达式. SQL Server支持四种类型的表表达式:派生表,公用表表达式,视图和内联表值函数. 为什么 ...

  5. mysql-router的安装与使用

    1.下载 https://dev.mysql.com/get/Downloads/MySQL-Router/mysql-router-2.0.4-linux-glibc2.12-x86-64bit.t ...

  6. PHP实现权限管理功能

    权限管理系统,它主要是为了给不同的用户设定不同的权限,从而实现不同权限的用户登录之后使用的功能不一样. 首先先看下数据库 总共有5张表,users,roles和roleswork 3张表与另外2张表形 ...

  7. （9）EvenOddJump

    一.问题描述 一只青蛙从数组(A)的每一个元素向数组尾部跳动.跳动规则如下: 当奇数跳的时候,就是第1.3.5.7....次进行移动时候,移动规则A[i] <= A[j],  并且A[j] = ...

  8. cocos 自动内存管理分析

    #include "CCAutoreleasePool.h" #include "ccMacros.h" NS_CC_BEGIN static CCPoolMa ...

  9. kafka为何需要High Available

    一.为何需要replication kafka0.8以前的版本中,是没有Replication的,一旦某一个Broker宕机,则其上所有的partition数据都不可被消费,这与kafka数据持久性及 ...

  10. linux switch 跳转到 ”跳转至 case 标号“ 的错误

    参考链接:  http://blog.csdn.net/qustdjx/article/details/8636489