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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
浅谈克隆 JavaScript
Nov 02 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
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
PHP5.3新特性小结
2016/02/14 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
Php多进程实现代码
2018/05/07 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
护士实习自我鉴定
2013/10/22 职场文书
传播学专业毕业生自荐信
2013/11/04 职场文书
编辑找工作求职信范文
2013/12/16 职场文书
农村婚礼主持词
2014/03/13 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
雷峰塔导游词
2015/02/09 职场文书
世界遗产导游词
2015/02/13 职场文书
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫