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 相关文章推荐
对联广告js flash激活
Oct 19 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
javascript操作元素的常见方法小结
Nov 13 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数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
python3.x实现发送邮件功能
2018/05/22 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
Django如何实现上传图片功能
2019/08/16 Python
python实现计算器功能
2019/10/31 Python
python matplotlib库的基本使用
2020/09/23 Python
python各种excel写入方式的速度对比
2020/11/10 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
介绍一下Mysql的存储引擎
2015/02/12 面试题
大学生求职信范文应怎么写
2014/01/01 职场文书
心理健康日活动总结
2014/05/08 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
单身申明具结书
2015/02/26 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
大学学生会辞职信
2015/05/13 职场文书
2015年征兵工作总结
2015/07/23 职场文书
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript