<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;催办投诉</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伸缩左侧菜单栏,已伸缩成功但是右侧主体部分不动的更多相关文章

  1. WebStorm设置左侧菜单栏背景和字体设置

    WebStorm左侧菜单栏 webstorm是一款前端IDE利器,个人感觉黑色的背景比较炫酷,刚开始从网上下载的主题只能修改编辑窗口的背景色,经过查询资料终于把左边菜单栏的背景色也修改了. 第一步:点 ...

  2. PHP系统左侧菜单栏的管理与实现

    在日常的开发工作中,面对后台的日益增长的业务,以及后期业务的迭代开发,通常会选择添加菜单栏的形式来扩充业务功能,同样日益增长的后台菜单选项也为我们后期的维护,产生了一定的困难性.为此我总结出自己关于左 ...

  3. WPF仿网易云音乐系列(一、左侧菜单栏:Expander+RadioButton)

    1.简介 上一篇咱们说到,网易云音乐的左侧菜单栏可以通过Expander+RadioButton来实现,具体如何实现,咱们下面开始干: 首先来一张网易云音乐PC版原图(个人觉得PC版比UWP版左侧菜单 ...

  4. 如何判定Unity已破解成功

    [如何判定Unity已破解成功] 点击菜单“Unity”->"About Unity...".在弹出的关于Unity的信息的对话框中,如果是已破解版本,在右下角会显示序列号.

  5. swiper伸缩侧边菜单栏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. 动态渲染左侧菜单栏 :menu tree 动态渲染

    其中后端代码不包含权限控制,同时支持二级(无子菜单) 和 三级菜单(无子菜单). 1.layui前端代码:(其他前端框架实现方法通用,不过需要修改js中append对应标签元素即可) <div ...

  7. centos 7.0 编译 安装mysql 5.6.22 过程 已完成~ 成功~ 撒花~

    mysql 下载目录/usr/local/srcmysql 解压目录 /usr/local/bin/mysql GitHub https://github.com/mysql/mysql-server ...

  8. WebStorm设置左侧菜单栏背景色和样式

    WebStrom一直以来都是默认的白色主题,今天想修改了下主题皮肤,结果导致左侧项目资源栏和顶部菜单栏也变成了黑色,结果无法改变回来,网上查了各种帖子,居然也没找到解决方法,自己研究了半天,终于搞定了 ...

  9. SPA项目开发之首页导航左侧菜单栏

    1. Mock.js 前后端分离开发开发过程当中,经常会遇到以下几个尴尬的场景: 1. 老大,接口文档还没输出,我的好多活干不下去啊! 2. 后端小哥,接口写好了没,我要测试啊! 前后端分离之后,前端 ...

  10. 005-(已测试成功的方案)kickstart模式实现批量安装centos7.x系统

    1.1 安装系统的方法 l  光盘(ISO文件,光盘的镜像文件)===>>每一台物理机都得给一个光驱,如果用外置光驱的话,是不是每台机器都需要插一下 l  U盘:ISO镜像刻录到U盘==& ...

随机推荐

  1. Angularjs的重要概念

    AngularJS的重要概念 MVC模式 AngularJS最早按照MVC模式设计,在这种设计模式下,AngularJS组件可以分为: M: Model,即模型,是应用程序中用于处理应用程序数据逻辑的 ...

  2. Blazor Hybrid (Blazor混合开发)更好的读取本地图片

    在 Blazor Hybrid 应用中,Razor 组件在设备上本机运行. 组件通过本地互操作通道呈现到嵌入式 Web View 控件. 组件不在浏览器中运行,并且不涉及 WebAssembly. R ...

  3. 路由分发、名称空间、视图层之必会的三板斧、JsonResponse对象、request获取文件、FBV与CBV、模板层语法传值

    路由分发.名称空间.视图层之必会的三板斧.JsonResponse对象.request获取文件.FBV与CBV.模板层语法传值 一.昨日内容回顾 二.路由分发 1.djiango的每个应用都有主见的t ...

  4. java入门与进阶P-6.1+P-6.2

    字符类型 字符型char在Java语言中占用 2 个字节,char类型的字面量必须使用半角的单引号括起来,取值范围为[ 0 - 65535 ],char 和 short 都占用 2 个字节,但是 ch ...

  5. Java语言的跨平台性-JDK,JRE和JVM

    Java语言的跨平台性 1 Java虚拟机--JVM JVM(Java Virtual Machine ):Java虚拟机,简称JVM,是运行所有Java程序的假想计算机,是Java程序的 运行环境, ...

  6. Sundial (二)

    相关重要的组件一览 Triggers(触发器)相关类 保存触发器相关参数,例如起止时间,次数,间隔时间等,其中Sundial支持多种类型触发器 多种类型的触发器必须重写GetNextOccurrenc ...

  7. 【单片机】nRF52832 实现停止蓝牙广播接口

    前言 有一个项目使用了 nRF52832 芯片作为主控,其中有用到蓝牙功能.在对蓝牙接口进一步封装的时候,发现 SDK 居然没有停止广播的接口,咨询了代理 FAE,对方也没有找到关闭广播的接口.后来通 ...

  8. Vue35 路由

    1 简介 vue-router是vue的一个插件,专门用来实现SPA应用.SPA也就是单页Web应用,特点是:整个应用只有一个完整的页面,点击页面中的导航链接不会刷新页面,只会做页面的局部更新,数据需 ...

  9. Rigol DSA815频谱仪在合肥光源工作点测量系统中的应用

    发的这篇文,我只是搬运工,读者切记. 合肥光源工作点测量系统已实现BBQ无激励在线测量,还是前些年永良师弟在这的时候调试成功的,并和超才把安捷伦的一台频谱仪和普源的DSA815的IOC调试成功,不过在 ...

  10. NuGet私有服务器ProGet Docker搭建和公司中实战用法

    一.什么时候需要用到NuGet私有服务器 很多公司中架构师会搭建一个统一的项目基础架构模板,然后全部新项目都会拿这个基础架构来开发新的项目,那架构中就会有很多的中间件,比喻公司内部的封装好的Redis ...