<!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. VNC黑屏解决办法

    在Linux里安装配置完VNC服务端,发现多用户登陆会出现黑屏的情况,具体的现象为:客户端可以通过IP与会话号登陆进入系统,但登陆进去是漆黑一片,除了一个叉形的鼠标以外,伸手不见五指. 原因:用户的V ...

  2. karma 启动提示PhantomJS not found on PATH

    Karma 介绍:是由AngularJS团队开发的测试执行过程管理实用工具,帮助开发人员在不同的浏览器中执行测试. 一般搭配PhantomJS作为浏览器启动器.PhantomJS是一个非主流的Webk ...

  3. socket http tcp udp ip 协议

    Socket可以支持不同的传输层协议(TCP或UDP),当使用TCP协议进行连接时,该Socket连接就是一个TCP连接. socket是在应用层和传输层之间的一个抽象层,它把TCP/IP层复杂的操作 ...

  4. expr命令总结

    expr在linux中是一个功能非常强大的命令.通过学习做一个小小的总结.1.计算字符串的长度.我们可以用awk中的length(s)进行计算.我们也可以用echo中的echo ${#string}进 ...

  5. COM+时代的自动事务

    最近看公司的遗留项目代码,调试的时候发现经常报分布式事务错误,可是整个代码里没有看见开启过事务,于是开始研究,发现了这个.Net Framework1.1时代的产物. namespace Busine ...

  6. [转]让程序不触发 Vista/Win7下应用程序兼容性助手弹出 .

    原文地址 http://blog.csdn.net/maxuhuiabc/article/details/6081874 在Vista/Win7下 运行一个 exe 应用程序后,系统经常弹出 兼容性助 ...

  7. Android分组子级的不同视图布局之BUG奇遇记

    Android分组子级的不同视图布局之BUG奇遇记 最近在使用按日期分类列表,二级条目可能不一样,于是就想到了ExpandableListView. ExpandableListView的布局显示分割 ...

  8. [原] ubuntu 13.10 安装 winqq2013

    安装及下载地址:http://www.longene.org/forum/viewtopic.php?t=4700 ubuntu 13.10 64位系统安装后无法启动qq,因为缺少程序包.解决方案: ...

  9. Git笔记：Git介绍和常用命令汇总

    Git 是一个开源的分布式版本控制系统,与 CVS, Subversion 等不同,它采用了分布式版本库的方式,不需要服务器端软件支持. 工作流程 Git 的工作流程大致如下: 克隆 Git 资源作为 ...

  10. Ajax(javascript)案例

    一.注册案例(Get方式) 1.前台 <%@ page language="java" import="java.util.*" pageEncoding ...