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 判断中文字符长度的函数代码
Aug 27 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
通过js随机函数Math.random实现乱序
May 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
php中define用法实例
2015/07/30 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
浅析node.js中close事件
2014/11/26 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
python中正则表达式的使用方法
2018/02/25 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
python如何构建mock接口服务
2021/01/28 Python
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
Unix控制后台进程都有哪些进程
2016/09/22 面试题
内衣营销方案
2014/03/15 职场文书
公司租房协议书范本
2014/10/08 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
长江七号观后感
2015/06/11 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL