<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

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

  <title>layout 后台大布局 - Layui</title>

  <link rel="stylesheet" href="layui/css/layui.css">

  <style>

   ol li a{

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

  }

    .three_this{

      background-color: #ebba92!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>

    <!-- 头部区域（可配合layui已有的水平导航） -->

    <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="http://t.cn/RCzsdCq" class="layui-nav-img">

          贤心

        </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">

      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->

      <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:;" id="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="javascript:;">列表三</a></dd>

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

          </dl>

        </li>

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

          <a href="javascript:;">解决方案</a>

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

            <dd><a href="javascript:;">列表一</a></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/layui.js"></script>

<script>

//JavaScript代码区域

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

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

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

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

  })

    $("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. python学习笔记（字符串操作、字典操作、三级菜单实例）

    字符串操作 name = "alex" print(name.capitalize()) #首字母大写 name = "my name is alex" pri ...

  2. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  3. python成长之路-----day1-----作业（登录程序和三级菜单）

    作业: 作业1:用户登录 1)程序说明: a.用户输入密码验证成功然后打印欢迎信息 b.如果密码错误,用户登录失败,提示用户,密码错误 c.用户输入密码错误3次,则用户锁定 d.当用户多次输入不存在的 ...

  4. Python之路 day2 字典练习题之 三级菜单

    #Author:ersa ''' 程序: 三级菜单 要求: 打印省.市.县三级菜单 可返回上一级 可随时退出程序 ''' menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{ ...

  5. python3 三级菜单

    python版本3.5 功能: 1.程序执行显示一级菜单,输入内容进入二级菜单: 2.进入二级菜单后,输入二级菜单内容,进入三级菜单:输入b返回一级菜单: 3.进入三级菜单后,输入b返回二级菜单. # ...

  6. 用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。

    用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...

  7. day1作业--三级菜单

    作业概述: 写一个三级菜单 实现如下功能: (1)可依次选择进入各子菜单 (2)在每一级按“b”都可以返回上一级,按“q"都可以退出 流程图: readme: 简介: three_menu. ...

  8. python打怪之路【第三篇】：利用Python实现三级菜单

    程序: 利用Python实现三级菜单 要求: 打印省.市.县三级菜单 可返回上一级 可随时退出程序 coding: menu = { '北京':{ '朝阳':{ '国贸':{ 'CICC':{}, ' ...

  9. Python字典实现三级菜单

    ################################################ # Task Name: 三级菜单 # # Description:打印省.市.县三级菜单 # # 可 ...

随机推荐

  1. [vuejs] vue2.0-layer-mobile移动端弹层

    vue2.0-layer-mobile移动端弹层 本次组件升级支持slot内容分发功能,实现高定制内容风格的弹层 安装方法 npm install vue2-layer-mobile -S 初始化 i ...

  2. C# 开发代码标准

    开发标准文件 文件名称:C#开发规范 版 本:V2.0 前言 目的是为了规范每个人的编程风格,为确保系统源程序可读性,从而增强系统可维护性,制定下述编程规范,以规范系统各部分编程.系统继承的其它资源中 ...

  3. 修改tomcat默认端口号

    修改tomcat端口号 端口修改tomcat tomcat服务器的默认端口号是8080 1 只启动一个tomcat的情况 当我们不想使用8080端口,需要修改为其他端口时,我们可以: 1, 打开tom ...

  4. Android v7包下Toolbar和ActionBarActivity实现后退导航效果

    android.support.v7包下的ToolBar和ActionBarActivity,均自带后退导航按钮,只是要手动开启,让它显示出来.先来看看ToolBar,页面前台代码: <andr ...

  5. Git文件状态

    在Git中,文件状态是一个非常重要的概念,不同的状态对应不同的操作.因此,要想熟练掌握Git的用法,需要了解Git的几种文件状态. Git库所在的文件夹中的文件大致有4种状态: Untracked:未 ...

  6. 实验1 C语言开发环境使用和数据类型、运算符、表达式

    ♦ 实验结论 PART 1 验证性内容 问题: 1.结尾没有加“:”时回车到下一行的时候再输入下一行的语言首字对齐方式会发生变化,可以对上一行进行检查. (这一点需要在不同软件里面试一下,在机房里的软 ...

  7. 1. git基础

    1. 安装git sudo apt-get install git 2. 注册 git config --global user.name "Your Name" git conf ...

  8. (转)python协程2：yield from 从入门到精通

    原文:http://blog.gusibi.com/post/python-coroutine-yield-from/ https://mp.weixin.qq.com/s?__biz=MzAwNjI ...

  9. netty客户端源码

    随笔记录. //创建一个ChannelFactory(客户端代码) ChannelFactory factory = new NioClientSocketChannelFactory( Execut ...

  10. 使用 IntelliJ IDEA 导入 Spark 最新源码及编译 Spark 源代码（博主强烈推荐）

    前言   其实啊,无论你是初学者还是具备了有一定spark编程经验,都需要对spark源码足够重视起来. 本人,肺腑之己见,想要成为大数据的大牛和顶尖专家,多结合源码和操练编程. 准备工作 1.sca ...