修改layui的后台模板的左侧导航栏可以伸缩
2024-08-31 04:32:18
原生的左侧导航栏代码：
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<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:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="javascript:;">列表三</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></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-side layui-bg-black">
<div class="layui-side-scroll">
<div title="菜单缩放" class="kit-side-fold"><i class="fa fa-navicon" aria-hidden="true"></i></div>
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;"><i class="fa fa-user-circle-o fa-lg"></i> <span >生源追踪</span></a>
<dl class="layui-nav-child">
<dd><a href="javascript:;"><i class="fa fa-list fa-lg"></i> <span >生源列表</span></a></dd>
<dd><a href="javascript:;"><i class="fa fa-clipboard fa-lg"></i> <span >学校信息</span></a></dd>
<dd><a href="javascript:;"><i class="fa fa-file-text fa-lg"></i> <span >工做计划</span></a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;"><i class="fa fa-vcard fa-lg"></i> <span >学员管理</span></a>
<dl class="layui-nav-child">
<dd><a href="javascript:;"><i class="fa fa-th-list fa-lg"></i> <span >学员列表</span></a></dd>
<dd><a href="javascript:;"><i class="fa fa-user-o fa-lg"></i> <span >考勤管理</span></a></dd>
<dd><a href="javascript:;"><i class="fa fa-send-o fa-lg"></i> <span >沟通计划</span></a></dd>
<dd><a href="javascript:;"><i class="fa fa-frown-o fa-lg"></i> <span >成绩管理</span></a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;"><i class="fa fa-diamond fa-lg"></i> <span >管理设置</span></a>
<dl class="layui-nav-child">
<dd><a href="javascript:;"><i class="fa fa-address-book fa-lg"></i> <span >账号管理</span></a></dd>
<dd><a href="javascript:;"><i class="fa fa-check-square fa-lg"></i> <span >授权管理</span></a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;"><i class="fa fa-gear fa-lg"></i> <span >系统管理</span></a>
<dl class="layui-nav-child">
<dd><a href="javascript:;"><i class="fa fa-window-restore fa-lg"></i> <span >系统信息</span></a></dd>
<dd><a href="javascript:;"><i class="fa fa-database fa-lg"></i> <span >操作日志</span></a></dd>
</dl>
</li>
</ul>
</div>
</div>JQ代码：
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
});
var isShow = true; //定义一个标志位
$('.kit-side-fold').click(function(){
//选择出所有的span，并判断是不是hidden
$('.layui-nav-item span').each(function(){
if($(this).is(':hidden')){
$(this).show();
}else{
$(this).hide();
}
});
//判断isshow的状态
if(isShow){
$('.layui-side.layui-bg-black').width(60); //设置宽度
$('.kit-side-fold i').css('margin-right', '70%'); //修改图标的位置
//将footer和body的宽度修改
$('.layui-body').css('left', 60+'px');
$('.layui-footer').css('left', 60+'px');
//将二级导航栏隐藏
$('dd span').each(function(){
$(this).hide();
});
//修改标志位
isShow =false;
}else{
$('.layui-side.layui-bg-black').width(200);
$('.kit-side-fold i').css('margin-right', '10%');
$('.layui-body').css('left', 200+'px');
$('.layui-footer').css('left', 200+'px');
$('dd span').each(function(){
$(this).show();
});
isShow =true;
}
});
</script>
最新文章
- VMware网络设置详解
- XproerIM V2开源，基于XproerUI引擎构架
- HTML5基础-Mark标签高亮显示文本
- 自定义SharePoint 2013 元数据选择控件
- 3Sum Closest——LeetCode
- JDBC开发模式
- python中的tab补全功能添加
- MySQL 5.6 中 TIMESTAMP 的变化
- BZOJ 1264: [AHOI2006]基因匹配Match( LCS )
- 批处理安装nodejs
- 格式化格林威治时间（Wed Aug 01 00:00:00 CST 2012）
- Hibernate中的实体映射
- LAN、WAN、WLAN、WiFi之间的区别
- Nodejs实现用户注册
- canvas绘图工具
- sql server导出数据，详细操作！（自用）
- A1109. Group Photo
- Confluence 6 配置推荐更新邮件通知默认的初始化设置
- Linux内核 kmalloc, kzalloc & devm_kzalloc 区别【转】
- 创建 .m2 文件夹