layui实现三级导航菜单


Posted in Javascript onJuly 26, 2019

本文实例为大家分享了layui实现三级导航菜单的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>.Net海</title>
 <link href="~/layui-v2.2.5/layui-v2.2.5/layui/css/layui.css" rel="stylesheet" /> //注意路劲
 
 <style>
  ol li a {
   background-color: rgba(0,0,0,1) !important;
  }

  .three_this {
   background-color: #808080 !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>
   <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="~/images/tb.png" class="layui-nav-img" />
      .Net海
     </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">
    <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:;" class="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:;" class="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="">超链接</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-v2.2.5/layui-v2.2.5/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();
    $.each($(this).parent().siblings(), function (i, e) {
     $(e).find("ol").hide();;
    });
    
   })
   $("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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 #Javascript
详解nvm管理多版本node踩坑
Jul 26 #Javascript
layui自定义ajax左侧三级菜单
Jul 26 #Javascript
layui递归实现动态左侧菜单
Jul 26 #Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 #Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 #Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 #Javascript
You might like
PHPLog php 程序调试追踪工具
2009/09/09 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
PyQt实现界面翻转切换效果
2018/04/20 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
django 控制页面跳转的例子
2019/08/06 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
Python restful框架接口开发实现
2020/04/13 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
打架检讨书400字
2014/01/17 职场文书
大学生求职信
2014/06/17 职场文书
求职信的正确写法
2014/07/10 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
暂停营业通知
2015/04/25 职场文书
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫