layui 三级菜单
<!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 三级菜单的更多相关文章
- python学习笔记(字符串操作、字典操作、三级菜单实例)
字符串操作 name = "alex" print(name.capitalize()) #首字母大写 name = "my name is alex" pri ...
- css三级菜单效果
一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- python成长之路-----day1-----作业(登录程序和三级菜单)
作业: 作业1:用户登录 1)程序说明: a.用户输入密码验证成功然后打印欢迎信息 b.如果密码错误,用户登录失败,提示用户,密码错误 c.用户输入密码错误3次,则用户锁定 d.当用户多次输入不存在的 ...
- Python之路 day2 字典练习题之 三级菜单
#Author:ersa ''' 程序: 三级菜单 要求: 打印省.市.县三级菜单 可返回上一级 可随时退出程序 ''' menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{ ...
- python3 三级菜单
python版本3.5 功能: 1.程序执行显示一级菜单,输入内容进入二级菜单: 2.进入二级菜单后,输入二级菜单内容,进入三级菜单:输入b返回一级菜单: 3.进入三级菜单后,输入b返回二级菜单. # ...
- 用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示。
用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...
- day1作业--三级菜单
作业概述: 写一个三级菜单 实现如下功能: (1)可依次选择进入各子菜单 (2)在每一级按“b”都可以返回上一级,按“q"都可以退出 流程图: readme: 简介: three_menu. ...
- python打怪之路【第三篇】:利用Python实现三级菜单
程序: 利用Python实现三级菜单 要求: 打印省.市.县三级菜单 可返回上一级 可随时退出程序 coding: menu = { '北京':{ '朝阳':{ '国贸':{ 'CICC':{}, ' ...
- Python字典实现三级菜单
################################################ # Task Name: 三级菜单 # # Description:打印省.市.县三级菜单 # # 可 ...
随机推荐
- C#6.0语言规范(六) 转换
转换能够被视为是一个特定类型的表达式.转换可能会导致给定类型的表达式被视为具有不同的类型,或者它可能导致没有类型的表达式获取类型.转换可以是隐式或显式的,这决定了是否需要显式转换.例如,从类型int到 ...
- 【原创】Dependency Walker
https://zh.wikipedia.org/wiki/Dependency_Walker For situations where the system says it can’t find s ...
- Error: insufficient funds for gas * price + value
有位同学今天用 web3+infura 获取 Rinkeby测试网络 的账号信息,报错如下: (node:18356) UnhandledPromiseRejectionWarning: Error: ...
- C#编程任务: 把工作交给别人并等待其执行完成
生活中有这样的场景: 我有一件事情需要别人帮忙去办, 但是别人也很忙呀, 所以我只能把任务记载他的任务清单上, 等他一个个扫下来扫到我的并且完成之后再来告诉我. 这其实是一个多线程的问题. 我是线程A ...
- Java实现二分法排序
二分法:(二分法不是只能做数组,这里的数组只是为了举例) 在给出的有序排列的数组中,把目标值和数组中间值进行比较,如果相等,则返回中间值下标,如果目标值小于中间值,就从数组的前半段再次执行二分法查找, ...
- 【JAVA】类加载器
在Java中主要有一下三种类加载器; Booststrap ClassLoader:此加载器采用C++编写,一般开发中是看不到的: Extendsion ClassLoader:用来进行扩展类的加载, ...
- Django+Echarts画图实例
所有演示均基于Django2.0 阅读此篇文章你可以: 了解Django中aggregate和annotate函数的使用方法 获取一个Django+Echarts绘制柱状图的完整示例 需求说明 一张会 ...
- mysql sql语句最大长度设置方法
今天发现了一个错误:Could not execute JDBC batch update 最后发现原因是SQL语句长度大于1M,而我机器上的mysql是默认设置,也就是说mysql通讯的数据包大小设 ...
- 自我总结(四) ---java web项目完结,j2ee的开始
自我完善的过程就是在不断的自我总结不断的改进. 前半个月刚好把项目做完了,项目也答辩了.总的来说吧,我觉得自己在java web这块知识上不算是彻彻底底把他弄懂了,就是说到的知识点都能够回答的上来一些 ...
- Elasticsearch java客户端调用cat服务
开发环境,测试环境,预发环境和生产环境一般相互隔离的,使用开发环境或者测试环境可以使用cat来查看索引的情况 例如: 但预防环境和测试环境是不允许访问的,那怎么办呢? 可以使用后台来查看上述信息,提供 ...