<!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. git add .添加不成功

    情景: 我首先在一个有许多文件的文件夹中  git init  创建一个git管理仓库 之后 git add . 之后 git commit -m "提交" 发现提交不成功,文件没 ...

  2. Shuffle（洗牌）

    Shuffle(洗牌)    图    map        1.Map Task的输出k v,一开始会进入溢写缓冲区中,对数据做处理,比如分区.排序等操作.        2.有几个Map Task ...

  3. NPOI读取excel文件导出数据, 而此时文件正在打开中抛异常怎么办

    项目中需要用到一些数值表格, 方便起见都是用excel来的. 而如果excel正打开中, 直接使用npoi制作的工具来导出数据的话, 在这一行将会异常: workbook = new XSSFWork ...

  4. mongo数据查询操作

    本文来源于 :Stephen Liu 1.  基本查询:     构造查询数据.    > db.test.findOne()    {         "_id" : Ob ...

  5. C# 多线程之List的线程安全问题

    网上关于List的线程安全问题将的很少,所以自己实验了一把,发现确实是线程不安全的.所以当你在进行多线程编程中使用了共享的List集合,必须对其进行线程安全处理. List的Add方法是线程不安全的, ...

  6. rtp header

    rtp协议基于udp传输,流媒体音视频数据被封装在rtp中,通过rtp协议进行实时的传输. 一.rtp协议头格式 The RTP header has a minimum size of 12 byt ...

  7. storm_分组策略

      注意1:原始的案例 spout 和bolt都是1个并发  所以文件中30条日志 从spout发出以后 bolt接受到30条

  8. Windows 8.1 GetVersionEx返回6.2.9200 的问题！

    http://msdn.microsoft.com/en-us/library/windows/desktop/dn302074.aspx http://tunps.com/getversionex- ...

  9. 【转】谷歌三大核心技术（三）Google BigTable中文版

      谷歌三大核心技术(三)Google BigTable中文版 摘要 Bigtable 是一个分布式的结构化数据存储系统,它被设计用来处理海量数据:通常是分布在数千台普通服务器上的PB级的数据.Goo ...

  10. 手机App安全性测试初探

    目前手机App测试还是以发现bug为主,主要测试流程就是服务器接口测试,客户端功能性覆盖,以及自动化配合的性能,适配,压测等,对于App安全性测试貌似没有系统全面统一的标准和流程,其实安全性bug也可 ...