1. <ul class="layui-nav layui-nav-tree" lay-filter="test" style="width:200px" onclick="ulHide()" >
  2. <li class="layui-nav-item">
  3. <a class="" href="javascript:;"><i class="layui-icon layui-icon-form" ></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;催办投诉</a>
  4. <dl class="layui-nav-child">
  5. <dd>
  6. <a href="javascript:;" data-id="1" data-title="投诉发起" data-url="Complain.asp"
  7. class="site-demo-active" data-type="tabAdd">投诉发起</a>
  8. </dd>
  9. <dd>
  10. <a href="javascript:;" data-id="2" data-title="待处理清单" data-url="ComplainQD.asp"
  11. class="site-demo-active" data-type="tabAdd">待处理清单</a>
  12. </dd>
  13. <dd>
  14. <a href="javascript:;" data-id="3" data-title="清单" data-url="ComplainQuery.asp"
  15. class="site-demo-active" data-type="tabAdd">清单</a>
  16. </dd>
  17. <dd>
  18. <a href="javascript:;" data-id="4" data-title="统计清单" data-url="ComplainTJ.asp"
  19. class="site-demo-active" data-type="tabAdd">统计清单</a>
  20. </dd>
  21. </dl>
  22. </li>
  23. </div>
  24. </div>
  25. 主题部分
  26. <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
  27. <ul class="layui-tab-title">
  28. <li class="layui_this" lay-id="0">主页</li>
  29. </ul>
  30. <div class="layui-tab-content">
  31. <div class="layui-tab-item layui-show">
  32. <iframe src="index.asp" frameborder="0" scrolling="no" width="1800" height="800"></iframe>
  33. </div>
  34. </div>
  35. </div>
  36. <script>
  37. layui.use('element', function(){
  38. var element = layui.element;
  39. });
  40. var isShow=1;
  41. function iconHide(){
  42. if(isShow===1)
  43. hide();
  44. else
  45. show();
  46. isShow*=-1;
  47. }
  48. function hide(){
  49. $('.layui-side span').hide();
  50. $('.layui-side').animate({width:'200px'});//展开后的宽度
  51. $('.layui-body').animate({left:'200px'});
  52. document.getElementById('hide').className="layui-color layui-icon layui-icon-spread-left";
  53. }
  54. function show(){
  55. $('.layui-side span').show();
  56. $('.layui-side').animate({width:'55px'});//缩进去之后的宽度
  57. $('.layui-body').animate({left:'200px'});
  58. document.getElementById('hide').className="layui-color layui-icon layui-icon-shrink-right";
  59. }
  60. function ulHide(){
  61. if(isShow===-1)
  62. show();
  63. isShow=1;
  64. }
  65. </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. sstream中的stringstream怎么用

    sstream中的stringstream怎么用 1.cin cin是从缓冲区读入,会把空格.回车等不可见的字符当做是分割,跳过.并且最后读入之后,后面会有剩余的部分,比如空格.回车等. 2.getl ...

  2. WPF中下拉框即可以选择项也可以作为只读文本框使用

    1.需求 当前在开发的系统需要一个这样的控件. (1)可以选择已有的选择项,类似于ComboBox选择: (2)可以通过其他按钮点击,选择一个文件,选择后,把文件路径显示到控件上,并且处于只读状态,行 ...

  3. 系列化和反序列化的概述-对象的序列化_Object Output Stream类

    系列化和反序列化的概述 Java提供了一种对象序列化的机制.用一个字节序列可以表示一个对象,该字节序列包含该对象的数据对象的类型和对象中存储的属性等信息.字节序列写出到文件之后,相当于文件中持久保存了 ...

  4. 定时调度插件------Longbow.Tasks

    官网地址Longbow.Tasks 使用说明 dll引用 使用NuGet 搜索Longbow.Task可找到相关版本的dll 目前最新的为7.0.0版本,需net6.0+ 如果低版本用户可使用5.2. ...

  5. get请求与post请求的区别

    大小限制 get请求一般通过url传输的数据量时比较少的,最多传3~5个参数,如果要传递多个参数,要在url地址中利用"&"符号拼接多个参数, 栗子:/test/demo. ...

  6. 【CTO变形记】有序定无序—为什么越努力,越无力

      前言:我们用自己构建的认知结构来理解和映射这个世界,通过外界的反馈来调整现有的认知.但面对的现实越来越复杂,以及面对更多的未知且陌生的情况时,我们常常试图去"修整"接受到的信息 ...

  7. JMH测试工具

    参考:https://blog.csdn.net/agonie201218/article/details/122333354 1 简介 JMH即Java Microbenchmark Harness ...

  8. 线程基础知识12-AQS

    转:https://tech.meituan.com/2019/12/05/aqs-theory-and-apply.html 1 简介 AQS,全称AbstractQueuedSynchronize ...

  9. 6、Collections工具类

    1.Collections工具类介绍 Collections 是一个操作 Set.List 和 Map 等集合的工具类 Collections 中提供了一系列静态的方法对集合元素进行排序.查询和修改等 ...

  10. 2021级《JAVA语言程序设计》上机考试试题10

    教学副院长功能页 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...