<!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. 机器学习基石笔记：15 Validation

    一.模型选择问题 如何选择? 视觉上 NO 不是所有资料都能可视化;人脑模型复杂度也得算上. 通过Ein NO 容易过拟合;泛化能力差. 通过Etest NO 能保证好的泛化,不过往往没法提前获得测试 ...

  2. Angular使用总结 --- 搜索场景中使用rxjs的操作符

    在有input输入框的搜索/过滤业务中,总会考虑如何减少发起请求频率,尽量使每次的请求都是有效的.节流和防抖是比较常见的做法,这类函数的实现方式也不难,不过终归还是需要自己封装.rxjs提供了各种操作 ...

  3. [0day]微软VS全版本DLL却持漏洞(VS2015 VS2013 VS2012 VS2010 VS2008)

    <无敌破坏王>大师兄说的 "我不是针对谁,而是在座的各位,都是垃圾"前几天在国外论坛看到一个VS2010 DLL却持漏洞 测试发现是全版本 实际上2014年在某越南黑客 ...

  4. (转)Python开发程序：支持多用户在线的FTP程序

    原文链接:http://www.itnose.net/detail/6642756.html 作业:开发一个支持多用户在线的FTP程序 要求: 用户加密认证 允许同时多用户登录 每个用户有自己的家目录 ...

  5. JavaServer Faces生命周期概述

    JavaServer Faces应用程序的生命周期在客户端为页面发出HTTP请求时开始,并在服务器响应该页面并转换为HTML时结束. 生命周期可以分为两个主要阶段:执行和渲染.执行阶段进一步分为子阶段 ...

  6. Linux系列：Fedora虚拟机设置固定IP上网（配置IP、网关、DNS、防止resolv.conf被重写）

    首先声明:该方法在Fedora 17和18版本下有效,其它版本也许可行也许有所差异. 1.  虚拟机相关配置 如果不是虚拟机系统,则这步不需要,若是相关配置详细信息请看“Linux系列:Ubuntu虚 ...

  7. springboot-33-使用maven打瘦包

    直接使用maven的插件打包的话, 打出来一个jar, 会非常大, 有时候在服务上传的时候会非常不方便, <plugin> <groupId>org.springframewo ...

  8. Andrew Ng机器学习课程笔记（六）之 机器学习系统的设计

    Andrew Ng机器学习课程笔记(六)之 机器学习系统的设计 版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7392408.h ...

  9. winDBG排错小记

    去年底,公司一个上线了近一年的系统逐渐出现访问缓慢,操作超时的问题.本人使用winDBG工具对抓下来的内存映象进行了诊断,虽最后没有查出什么原因,但在过程中也学到了不少东西,现记录如下 一. “Fai ...

  10. 让 markdown 生成带目录的 html 文件

    安装 npm install -g i5ting_toc 用法 进入 markdown 文件所在的文件夹 举个栗子: 你的sample.md文件放在桌面上 cd /Users/dora/Desktop ...