layui实现三级导航菜单

日期：2020-11-18 栏目：程序人生浏览：次

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1, maximum-scale=1"> <title>.Net海</title> <link href="https://www.jb51.net/~/layui-v2.2.5/layui-v2.2.5/layui/css/layui.css" /> //注意路劲 <style> ol li a { background-color: rgba(0,0,0,1) !important; } .three_this { background-color: #808080 !important; } </style> </head> <body> <div> <div> <div>layui 后台布局</div> <ul> <li><a href="">控制台</a></li> <li><a href="">商品管理</a></li> <li><a href="">用户管理</a></li> <li> <a href="javascript:;" >日常</a> <dl> <dd><a href="">邮件管理</a></dd> <dd><a href="">消息管理</a></dd> <dd><a href="">授权管理</a></dd> </dl> </li> </ul> <ul> <li> <a href="javascript:;" > <img src="https://www.jb51.net/~/images/tb.png" /> .Net海 </a> <dl> <dd><a href="">基本资料</a></dd> <dd><a href="">安全设置</a></dd> </dl> </li> <li><a href="">退出</a></li> </ul> </div> <div> <div> <ul lay-filter="test"> <li> <a href="javascript:;" >所有商品</a> <dl> <dd> <a href="javascript:;">列表一</a> <ol> <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> <ol> <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><a href="">云市场</a></li> <li><a href="">发布商品</a></li> </ul> </div> </div> <div>  <div>内容主体区域</div> </div> <div>  © layui.com - 底部固定区域 </div> </div> //注意路劲 <script src="https://www.jb51.net/~/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>

转载注明出处：http://www.heiqu.com/b38cf84c98e2b813f56f25c7b2991c06.html

layui实现三级导航菜单

相关推荐