layui菜单点击刷新，自适应

最近在项目上用layui框架后台iframe版，遇到的一些问题分享：

1.项目的左侧菜单点击对应的子菜单能自动刷新问题。

2.除了在左侧有菜单，还需要在右侧需要一个菜单(跳转到新页面)，并且能够伸缩自适应。

基于以上两个点：先简单的画个草图（场景）

直接用layui的模板是不符合项目需求的。现在先回答第一个问题的处理：

之前在网上看到对于左侧菜单刷新问题都是不符合：

eg：layui的底层js,一般就是admin.js里面找到tabChange方法去处理，试了没找到，直接跳过。百度上可以自行查找很多，这里就不一 一说明。以下只是针对自己在项目上遇到的问题处理方案

用到的layui.js版本：layui-v2.4.3 。

1.对于刷新问题，可以在对应的官方文档中找到：利用element.on()可以监听导航事件，在callback中处理自己相关的业务既可。

2.需要在右侧添加一个菜单，开始的思路：直接给主体内容和右侧菜单赋予一定比例的百分比,通过js去控制切换，尝试后左右两侧点击操作后不能自适应屏幕，不行在换一思路，不服就干。继续干，，，，

查找后还是无果，咋办呢，项目需要，不另想办法处理是不行的啦。。。。。。

最后只能是出大招了。。。。。。。！！！！！！！！！

请看官方的demo是这样的

我稍作修改，就可以自适应啦

在右侧菜单你可能需要做一个伸缩的功能，可能会遇到一个坑：layui 中点击切换伸缩，有时候会无效的问题。

无效问题：

//使用此点击事件失效
$(".类名").on('click', function() {
    alert('响应点击事件');
});

//将指定的事件绑定在document上，而新产生的元素如果符合指定的元素，那就触发此事件

 $(document).on('click', '.类名',function () {

   点击后需要做什么，添加class或者其他

    if(条件){ // 判断了是否展开了？还是收起了？

    　　// 存在进行的操作

 　　　....

    } else {

     // 不存在该干嘛

　　.....

    }

  });

右侧菜单的其他就不贴出，贴出点击例子：

 $(document).on('click', '.shrinkage',function () {

    $(".right-nav").toggleClass("lvc-close");

    $(".right-side-menu").toggleClass("small-ul");

    if($("#lvc-nav").hasClass('lvc-close')){

      $(".layui-layout-admin .layui-body ").css("right","50px");

      $(".right-nav").css("width","49px");

    } else {

      $(".layui-layout-admin .layui-body ").css("right","150px");

      $(".right-nav").css("width","115px");

    }

  });

第二点的问题处理不仅实现了左右两侧点击后能自适应，跟之前的效果完美贴合，不需要过多代码处理，哈哈哈哈哈哈哈哈哈哈

@

@
@
@
@

写作不易，记录遇到点滴，有问题可以一起交流，欢迎留言，，，，，不足之处，提出意见，共同进步！！！！！！