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对IE操作的经典代码(推荐)
Mar 10 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
详解JavaScript的变量
Apr 04 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
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中反射的应用
2013/06/18 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python实现栈的方法
2015/05/26 Python
Python读取网页内容的方法
2015/07/30 Python
Python对数据库操作
2016/03/28 Python
Python语言描述随机梯度下降法
2018/01/04 Python
python实现俄罗斯方块游戏
2020/03/25 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
用Python制作音乐海报
2021/01/26 Python
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
企业治理工作自我评价
2013/09/26 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
无罪辩护词范文
2015/05/21 职场文书
python实现简单倒计时功能
2021/04/21 Python
React配置子路由的实现
2021/06/03 Javascript