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 相关文章推荐
JavaScript URL参数读取改进版
Jan 16 Javascript
input 输入框内的输入事件详细分析
Mar 17 Javascript
offsetParent 算法分析
Apr 05 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 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 zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
tornado捕获和处理404错误的方法
2014/02/26 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
如何清空python的变量
2020/07/05 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
大学生思想汇报范文
2013/12/31 职场文书
企业员工集体活动方案
2014/08/17 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
公司与个人合作协议书
2016/03/19 职场文书