layui模块显示收缩_修改layui的后台模板的左侧导航栏可以伸缩的方法

原生的左侧导航栏代码：

所有商品

列表一

列表二

列表三

超链接
解决方案

列表一

列表二

超链接
云市场
发布商品

自己修改的：

生源追踪

生源列表

学校信息

工做计划
学员管理

学员列表

考勤管理

沟通计划

成绩管理
管理设置

账号管理

授权管理
系统管理

系统信息

操作日志

JQ代码：

//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;

}

});

以上这篇修改layui的后台模板的左侧导航栏可以伸缩的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

layui模块显示收缩_修改layui的后台模板的左侧导航栏可以伸缩的方法相关推荐

html左侧导航栏右侧显示内容
效果图代码复制下来直接运行就可以 <!doctype html> <html lang = "en"><head><meta char ...
修改vue-element-admin左侧导航栏的图标
vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架,这是使用vue技术栈开发的前端程序员的首选管理系统模板,模板以及非常的成熟了,并且有相关的社区和 ...
iOS基础：修改app状态栏颜色以及原生的导航栏颜色
<1>设置状态栏文字颜色以及背景颜色这个设置引用自链接:https://www.jianshu.com/p/889cff2b3a52 苹果目前状态栏目前有两种状态颜色 iOS7以后状态 ...
bootstrap4 左侧导航栏优秀大气_制作动态效果的后台导航栏——左侧导航
怎么制作动态效果的后台导航栏呢,一起来文中看看~ 先上完成效果: 整体的制作过程 1. 制作菜单元件分别制作导航菜单中的每个元件,制作好一个以后,就可以复用了,制作步骤如下: 使用矩形,制作单个导航 ...
bootstrap 固定最底部_固定在页面顶部或底部的导航栏《 Bootstrap 3 基础》
Bootstrap 里面的导航栏有两种样式,你现在看到的是默认的样式,这里我们把 navbar-default 这个类 ... 换成 navbar-inverse ... 这样会得到一个暗色背景的导航 ...
php 公众号模板消息id如何获取_微信公众号后台模板消息如何实现发送的功能...
在公众平台实现发送模板消息功能,只能通过公众平台的接口开发实现,或者通过第三方平台微号帮功能模板消息群发实现,均能为微信公众号发送模板消息功能,模板消息发送不占用公众号每月的群发次数,模板消息仅用于公 ...
html5左侧边导航右边显示页面,bootstrap如何实现左侧导航栏右侧网页
方式一:采用iframe,即将网页放入iframe这个容器中. 方式二:采用div的话绑定a或者li的点击事件阻止a的默认行为,用jquery的load()可以来加载这个div,即将网页放入div中 ...
cms网站模板php修改,帝国CMS后台模板开发修改
帝国CMS后台管理信息模板修改可以在模板文件里找到后台管理信息模板文件,然后进行代码里修改. 帝国CMS后台管理信息模板文件地址为: e\data\html\list\alllistinfo.php ...
layui选项卡嵌套选项卡_在ProtoPie中使用嵌套组件构建选项卡栏
layui选项卡嵌套选项卡 One of the powerful features of ProtoPie is the ability to build fully portable and in ...

layui模块显示收缩_修改layui的后台模板的左侧导航栏可以伸缩的方法

layui模块显示收缩_修改layui的后台模板的左侧导航栏可以伸缩的方法相关推荐

最新文章

热门文章