<!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. GoLang学习控制语句之switch

    基本结构 相比较 C 和 Java 等其它语言而言,Go 语言中的 switch 结构使用上更加灵活.它接受任意形式的表达式,例如: switch var1 { case val1: ... case ...

  2. MySQL赋权

    MySQL 赋予用户权限命令的简单格式可概括为:grant 权限 on 数据库对象 to 用户 一.grant 普通数据用户,查询.插入.更新.删除 数据库中所有表数据的权利.grant select ...

  3. java批量解压文件夹下的所有压缩文件（.rar、.zip、.gz、.tar.gz）

    // java批量解压文件夹下的所有压缩文件(.rar..zip..gz..tar.gz) 新建工具类: package com.mobile.utils; import com.github.jun ...

  4. Git文件状态

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

  5. [原创]K8飞刀20150725 支持SOCKS5代理(内网渗透)

    工具: K8飞刀编译: 自己查壳组织: K8搞基大队[K8team]作者: K8拉登哥哥博客: http://qqhack8.blog.163.com发布: 2015/7/26 3:41:11 简介: ...

  6. 如何用ajax下载文件

    引子 在HTML5没来之前,浏览器想要下载文件,可能有这么几种方式: 借助a标签,<a href="学习资料.xlsx"></a> window.locat ...

  7. 高可用的MongoDB集群－实战篇

    1.概述 最近有同学和网友私信我,问我MongoDB方面的问题:这里我整理一篇博客来赘述下MongoDB供大家学习参考,博客的目录内容如下: 基本操作 CRUD MapReduce 本篇文章是基于Mo ...

  8. 基于HA机制的MyCat架构——配置HAProxy

    HAProxy简介HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案. HAProxy特别适用于那些负载特大的web站点,这些站 ...

  9. Java中带包（创建及引用）的类的编译

    Java中带包(创建及引用)的类的编译与调试 java源程序的编译大家都知道,也就是cmd中到源文件所在目录下javac **.java即可,当程序中有包声明还能简简单单的直接javac **.jav ...

  10. js的继承方式分别适合哪些应用场景？

    一.原型链 利用 Person.prototype = new Animal("Human") 实现继承: static式继承.能继承Animal.prototype.不可多重继承 ...