layui 搭建后台 --------- 左侧导航栏收缩以及tab选项卡切换

参考链接:
https://blog.csdn.net/qq_28198181/article/details/117286245 .
https://blog.csdn.net/huyaochao99/article/details/116162109 .

========================================================

左侧菜单展开收缩

============================js=============================
  //头部事件
  util.event('lay-header-event', {
      //左侧菜单展开收缩事件
      menuLeft: function(othis){
          // layer.msg("展开左侧菜单的操作", {icon: 0});
          var btn = $("#left-icon");
          if (btn.hasClass('layui-icon-spread-left')) {
              menuShow(btn);
              btn.addClass('btn-index');
          } else if (btn.has('layui-icon-shrink-right')) {
              btn.removeClass('btn-index');
              menuHide(btn);
          }

      }
  });
    /*展示左侧栏*/
    function menuShow(btn) {
        btn.removeClass('layui-icon-spread-left').addClass('layui-icon-shrink-right');
        toggle如果原来div是隐藏的就会把元素显示，如果原来是显示则隐藏
        $(".zq-logo").animate({width: 'toggle'});
        $(".layui-side").animate({width: 'toggle'});
        // $(".layui-logo").animate({width: 'toggle'});
        $(".layui-body").animate({left: '200px'});
        $(".layui-footer").animate({left: '200px'});
        // $(".layui-layout-left").animate({left: '200px'})
    }
    /*隐藏左侧栏*/
    function menuHide(btn) {
        btn.removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');
        $(".layui-side").animate({width: 'toggle'});
        // $(".layui-logo").animate({width: 'toggle'});
        $(".layui-body").animate({left: '0px'});
        $(".layui-footer").animate({left: '0px'});
        // $(".layui-layout-left").animate({left: '0px'});
    }

左侧菜单点击切换

==================html=====================
  <!-- 内容主体区域 -->
  <div class="layui-tab" lay-allowClose="true" lay-filter="tables">
      <!--选项-->
      <ul class="layui-tab-title">
          <li class="layui-this" lay-id="content">你好足球</li>
          
      </ul>
      <!--内容-->
      <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">1</div>

      </div>
  </div>
==================js=========================
//左侧菜单点击事件
 $('.tab-active').on('click', function () {
     var dataid = $(this);
     //判断右侧是否有tab
     if ($('.layui-tab-title li[lay-id]').length <= 0) {
         tabFunction.tabAdd(dataid.attr('data-url'), dataid.attr('data-id'), dataid.attr('data-title'));
     } else {
         //判断tab是否已经存在
         var isExist = false;
         $.each($('.layui-tab-title li[lay-id]'), function () {
             //筛选id是否存在
             if ($(this).attr('lay-id') == dataid.attr("data-id")) {
                 isExist = true;
             }
         });
         //不存在，增加tab
         if (isExist == false) {
             tabFunction.tabAdd(dataid.attr('data-url'), dataid.attr('data-id'), dataid.attr('data-title'));
         }
     }
     //转到要打开的tab
     tabFunction.tabChange(dataid.attr('data-id'));

 });
 //定义函数 绑定增加tab，删除tab，切换tab几项事件
 var tabFunction = {
     //新增tab url 页面地址 id 对应data-id name标题
     tabAdd: function (url, id, name) {
         element.tabAdd('tables', {
             title: name,
             content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:800px"></iframe>',
             id:id
         });
     },
     //根据id切换tab
     tabChange: function (id) {
         element.tabChange('tables',id)
     },
     //关闭指定的tab
     tabDelete: function (id) {
         element.tabDelete('tables',id)
     }
 }