先来看看效果：
一部分关键的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>左侧导航栏</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/page.css" />
<link rel="stylesheet" href="https://lib.sinaapp.com/js/bootstrap/4.2.1/css/bootstrap.min.css">
<link href="plugins/css/icons.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page" id="app">
<div class="nav-left">
<div class="LogoName">
WDTLoong Cloud
</div>
<div class="navDiv">
<div class="navName">导航</div>
<div class="nav-list">
<ul>
<li class="nav-tab a_active waves-effect">
<a href="html/home.html" class="li-a active" target="iframe"><i class='bx bx-home-smile'></i> 主页
<span class="badge badge-pill badge-primary float-right">3</span>
</a>
</li>
<!-- <li class="nav-tab">
<a href="#" class="li-a"><i class='bx bx-home-smile'></i> 设备管理</a>
</li> -->
<li class="nav-tab nav-ul">
<a href="javascript:void[0]" class="li-a"><i class='bx bx-layer'></i> 设备管理
<i class='bx bx-chevron-right' style="float: right;"></i></a>
<div class="nav-box">
<a href="html/device/device.html" class="li-a-a" target="iframe">当前能耗</a>
<a href="html/device/device.html" class="li-a-a" target="iframe">采集记录</a>
<a href="html/device/device.html" class="li-a-a" target="iframe">设备详细</a>
<a href="html/device/device.html" class="li-a-a" target="iframe">运行状态统计</a>
</div>
</li>
<li class="nav-tab nav-ul">
<a href="javascript:void[0]" class="li-a"><i class='bx bx-cog'></i> 维修保养
<i class='bx bx-chevron-right' style="float: right;"></i></a>
<div class="nav-box">
<a href="html/device/device.html" class="li-a-a" target="iframe">养护计划</a>
<a href="html/device/device.html" class="li-a-a" target="iframe">养护任务</a>
<a href="html/device/device.html" class="li-a-a" target="iframe">养护记录</a>
<a href="html/device/device.html" class="li-a-a" target="iframe">养护统计</a>
</div>
</li>
<li class="nav-tab nav-ul">
<a href="javascript:void[0]" class="li-a"><i class='bx bx-buildings'></i> 巡检管理
<i class='bx bx-chevron-right' style="float: right;"></i></a>
<div class="nav-box">
<a href="html/device/device.html" class="li-a-a" target="iframe">巡检计划</a>
<a href="html/device/device.html" class="li-a-a" target="iframe">巡检任务</a>
<a href="html/device/device.html" class="li-a-a" target="iframe">巡检标准</a>
<a href="html/device/device.html" class="li-a-a" target="iframe">巡检统计</a>
</div>
</li>
<li class="nav-tab nav-ul">
<a href="javascript:void[0]" class="li-a"><i class='bx bx-edit'></i> 工单管理
<i class='bx bx-chevron-right' style="float: right;"></i></a>
<div class="nav-box">
<a href="html/device/device.html" class="li-a-a" target="iframe">维修计划</a>
<a href="html/device/device.html" class="li-a-a" target="iframe">故障报修</a>
<a href="html/device/device.html" class="li-a-a" target="iframe">委外维修</a>
<a href="html/device/device.html" class="li-a-a" target="iframe">维修工单</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="nav-right">
<div class="nav-top">
上方导航
</div>
<div class="content-page">
<iframe name="iframe" width="100%" height="100%" frameborder="0"
src="html/home.html"></iframe>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
let navflag = false;
$('.nav-tab').click(function() {
$(this).siblings().each(function() {
$(this).removeClass('a_active');
// $(this).removeClass('a_active');
$(this).find('.nav-box').css('height', '0')
//关闭右侧箭头
if ($(this).attr('class').indexOf('nav-ul') != -1) {
$(this).find('.bx-chevron-right').css('transform', 'rotateZ(0deg)')
$(this).find('.bx-chevron-right').css('transition', 'all .5s')
$(this).removeClass('nav-show')
// $(this).find('div').removeClass('nav-box')
}
})
//当前选中
$(this).addClass('a_active')
$(this).find('.li-a').addClass('active')
// 打开右侧箭头
$(this).find('.bx-chevron-right').css('transform', 'rotateZ(90deg)')
$(this).find('.bx-chevron-right').css('transition', 'all .5s')
$(this).addClass('nav-show')
// $(this).find('div').addClass('nav-box')
})
/* 二级菜单a点击事件 */
$(".li-a-a").click(function() {
$(".li-a-a").each(function() {
$(this).removeClass('active-li-a');
})
$(this).addClass('active-li-a');
})
})
// const vue = new Vue({
// el:'#app',
// data:{
// },
// methods:{
// liCli(){
// }
// }
// })
</script>
</body>
</html>
扫一扫
703
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
