<!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>
layui 左側三級菜單欄
相關文章
- 1. django crm 左側二級菜單欄
- 2. Layui——實現點擊左側菜單欄，tab進行刷新
- 3. 左側菜單
- 4. 左側菜單導航欄的實現
- 5. jquery網頁左側導航菜單欄
- 6. C# winfrom DEV左側菜單欄DIY
- 7. Axure8.0 製作左側動態菜單欄
- 8. 通用的左側菜單欄樣式（側邊欄）
- 9. layui實現左側菜單點擊右側內容區顯示
- 10. React + antd 實現左側多級菜單欄
- 更多相關文章...
- • ionic 側欄菜單 - ionic 教程
- • Eclipse 菜單 - Eclipse 教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • RxJava操作符（三）Filtering
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章