layui隐藏侧边栏后右边主体内容宽度如何做到自适应

在layui框架中，可以使用layui的布局样式来实现隐藏侧边栏后，右边主体内容的自适应宽度。

首先，在HTML中定义一个包含侧边栏和主体内容的容器，如下所示：

<div class="layui-layout layui-layout-admin">
  <!-- 侧边栏 -->
  <div class="layui-side">...</div>
  <!-- 主体内容 -->
  <div class="layui-body">...</div>
</div>

然后，在CSS中设置侧边栏的宽度和主体内容的宽度，并使用CSS的transition属性来实现侧边栏的隐藏效果，如下所示：

/* 侧边栏样式 */
.layui-side {
  width: 200px;  /* 侧边栏宽度 */
  transition: width 0.3s;  /* 侧边栏隐藏过渡效果 */
}

/* 主体内容样式 */
.layui-body {
  width: calc(100% - 200px);  /* 主体内容宽度为窗口宽度减去侧边栏宽度 */
  transition: width 0.3s;  /* 主体内容宽度过渡效果，与侧边栏保持一致 */
}

/* 侧边栏隐藏时的样式 */
.layui-layout-admin.layui-layout-admin-side-hide .layui-side {
  width: 0;  /* 侧边栏隐藏后宽度为0 */
}

/* 侧边栏隐藏时主体内容的样式 */
.layui-layout-admin.layui-layout-admin-side-hide .layui-body {
  width: 100%;  /* 主体内容宽度为窗口宽度 */
}

接下来，使用JavaScript来动态添加或删除layui-layout-admin-side-hide类，实现侧边栏的隐藏和显示，如下所示：

// 隐藏侧边栏
function hideSidebar() {
  var layout = $('.layui-layout-admin');
  layout.addClass('layui-layout-admin-side-hide');
}

// 显示侧边栏
function showSidebar() {
  var layout = $('.layui-layout-admin');
  layout.removeClass('layui-layout-admin-side-hide');
}

通过调用hideSidebar和showSidebar函数，可以实现隐藏和显示侧边栏的效果，同时右边主体内容的宽度会自动适应窗口大小