layui伸缩左侧菜单栏,已伸缩成功但是右侧主体部分不动
<ul class="layui-nav layui-nav-tree" lay-filter="test" style="width:200px" onclick="ulHide()" >
<li class="layui-nav-item">
<a class="" href="javascript:;"><i class="layui-icon layui-icon-form" ></i> 催办投诉</a>
<dl class="layui-nav-child">
<dd>
<a href="javascript:;" data-id="1" data-title="投诉发起" data-url="Complain.asp"
class="site-demo-active" data-type="tabAdd">投诉发起</a>
</dd>
<dd>
<a href="javascript:;" data-id="2" data-title="待处理清单" data-url="ComplainQD.asp"
class="site-demo-active" data-type="tabAdd">待处理清单</a>
</dd>
<dd>
<a href="javascript:;" data-id="3" data-title="清单" data-url="ComplainQuery.asp"
class="site-demo-active" data-type="tabAdd">清单</a>
</dd>
<dd>
<a href="javascript:;" data-id="4" data-title="统计清单" data-url="ComplainTJ.asp"
class="site-demo-active" data-type="tabAdd">统计清单</a>
</dd>
</dl>
</li>
</div>
</div>
主题部分
<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
<ul class="layui-tab-title">
<li class="layui_this" lay-id="0">主页</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<iframe src="index.asp" frameborder="0" scrolling="no" width="1800" height="800"></iframe>
</div>
</div>
</div>
<script>
layui.use('element', function(){
var element = layui.element;
});
var isShow=1;
function iconHide(){
if(isShow===1)
hide();
else
show();
isShow*=-1;
}
function hide(){
$('.layui-side span').hide();
$('.layui-side').animate({width:'200px'});//展开后的宽度
$('.layui-body').animate({left:'200px'});
document.getElementById('hide').className="layui-color layui-icon layui-icon-spread-left";
}
function show(){
$('.layui-side span').show();
$('.layui-side').animate({width:'55px'});//缩进去之后的宽度
$('.layui-body').animate({left:'200px'});
document.getElementById('hide').className="layui-color layui-icon layui-icon-shrink-right";
}
function ulHide(){
if(isShow===-1)
show();
isShow=1;
}
</script>
layui伸缩左侧菜单栏,已伸缩成功但是右侧主体部分不动的更多相关文章
- WebStorm设置左侧菜单栏背景和字体设置
WebStorm左侧菜单栏 webstorm是一款前端IDE利器,个人感觉黑色的背景比较炫酷,刚开始从网上下载的主题只能修改编辑窗口的背景色,经过查询资料终于把左边菜单栏的背景色也修改了. 第一步:点 ...
- PHP系统左侧菜单栏的管理与实现
在日常的开发工作中,面对后台的日益增长的业务,以及后期业务的迭代开发,通常会选择添加菜单栏的形式来扩充业务功能,同样日益增长的后台菜单选项也为我们后期的维护,产生了一定的困难性.为此我总结出自己关于左 ...
- WPF仿网易云音乐系列(一、左侧菜单栏:Expander+RadioButton)
1.简介 上一篇咱们说到,网易云音乐的左侧菜单栏可以通过Expander+RadioButton来实现,具体如何实现,咱们下面开始干: 首先来一张网易云音乐PC版原图(个人觉得PC版比UWP版左侧菜单 ...
- 如何判定Unity已破解成功
[如何判定Unity已破解成功] 点击菜单“Unity”->"About Unity...".在弹出的关于Unity的信息的对话框中,如果是已破解版本,在右下角会显示序列号.
- swiper伸缩侧边菜单栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 动态渲染左侧菜单栏 :menu tree 动态渲染
其中后端代码不包含权限控制,同时支持二级(无子菜单) 和 三级菜单(无子菜单). 1.layui前端代码:(其他前端框架实现方法通用,不过需要修改js中append对应标签元素即可) <div ...
- centos 7.0 编译 安装mysql 5.6.22 过程 已完成~ 成功~ 撒花~
mysql 下载目录/usr/local/srcmysql 解压目录 /usr/local/bin/mysql GitHub https://github.com/mysql/mysql-server ...
- WebStorm设置左侧菜单栏背景色和样式
WebStrom一直以来都是默认的白色主题,今天想修改了下主题皮肤,结果导致左侧项目资源栏和顶部菜单栏也变成了黑色,结果无法改变回来,网上查了各种帖子,居然也没找到解决方法,自己研究了半天,终于搞定了 ...
- SPA项目开发之首页导航左侧菜单栏
1. Mock.js 前后端分离开发开发过程当中,经常会遇到以下几个尴尬的场景: 1. 老大,接口文档还没输出,我的好多活干不下去啊! 2. 后端小哥,接口写好了没,我要测试啊! 前后端分离之后,前端 ...
- 005-(已测试成功的方案)kickstart模式实现批量安装centos7.x系统
1.1 安装系统的方法 l 光盘(ISO文件,光盘的镜像文件)===>>每一台物理机都得给一个光驱,如果用外置光驱的话,是不是每台机器都需要插一下 l U盘:ISO镜像刻录到U盘==& ...
随机推荐
- JS基础简介
JS基础简介 一.JS简介 JavaScript(简称'js')是一种具有函数优先的轻量级.解释型或及时编译型的编程语言.虽然它是作为开发web页面的脚本语言而出名,但是它也被用到了很多的非浏览器环境 ...
- centos7系统的安装部署过程
一.进入系统引导界面进行配置 引导项说明: 安装centos7系统(*) 测试光盘镜像并安装系统 排错模式(修复系统 重置系统密码) 补充:centos7系统网卡名称 默认系统的网卡名称 eth0 e ...
- python开发云主机类型管理脚本
python开发云主机类型管理脚本 开发flavor_manager.py程序,来完成云主机类型管理的相关操作. 该文件拥有以下功能: 根据命令行参数,创建一个云主机类型,返回response. 查询 ...
- 从历代GC算法角度刨析ZGC
作者:京东科技 文涛 前言 本文所有介绍仅限于HotSpot虚拟机, 本文先介绍了垃圾回收的必要手段,基于这些手段讲解了历代垃圾回收算法是如何工作的, 每一种算法不会讲的特别详细,只为读者从算法角度理 ...
- Node.js学习笔记----day05(MongonDB详情)
认真学习,认真记录,每天都要有进步呀!!! 加油叭!!! 一.es6中的find() 方法的原理 EcmaScript 6 对数组新增了很多方法 比如,find find 接收一个方法作为参数,方法内 ...
- linux 基础(7)账号和群组的管理
了解账号和群组的基本信息 账号使用 如何查看 linux 计算机上有哪些账号呢?账号的信息储存在/etc/passwd中,打开就可以看到: less /etc/passwd root:x:0:0:ro ...
- Nginx03 虚拟主机
1 虚拟主机 虚拟主机使用特殊的软硬件技术,把一台运行在因特网上的服务器主机分成一台台"虚拟"的主机,每一台虚拟主机都具有独立的域名,具有完整的Internet服务器(WWW.FT ...
- vivo官网App模块化开发方案-ModularDevTool
作者:vivo 互联网客户端团队- Wang Zhenyu 本文主要讲述了Android客户端模块化开发的痛点及解决方案,详细讲解了方案的实现思路和具体实现方法. 说明:本工具基于vivo互联网客户端 ...
- P7_小程序的宿主环境
宿主环境简介 什么是宿主环境 宿主环境(host environment)指的是程序运行所必须的依赖环境.例如:Android 系统和 iOS 系统是两个不同的宿主环境.安卓版的微信 App 是不能在 ...
- 分布式云原生平台Kurator v0.2.0正式发布!一键构建分布式云原生平台
摘要:北京时间2023年2月9日,Kurator 正式发布 v0.2.0 版本. 本文分享自华为云社区<分布式云原生平台Kurator v0.2.0正式发布!一键构建分布式云原生平台>,作 ...