Layui 隐藏侧边栏后，右边主体内容宽度自适应实现

"Layui 隐藏侧边栏后，右边主体内容宽度自适应实现"\n\n本文介绍了在 Layui 框架中，如何实现隐藏侧边栏后，右边主体内容宽度自动适应窗口大小。通过 CSS 的 transition 属性和 JavaScript 的动态类控制，轻松实现流畅的侧边栏隐藏效果和主体内容自适应。\n\n首先，在 HTML 中定义一个包含侧边栏和主体内容的容器，如下所示：\n\nhtml\n<div class="layui-layout layui-layout-admin">\n <!-- 侧边栏 -->\n <div class="layui-side">...</div>\n <!-- 主体内容 -->\n <div class="layui-body">...</div>\n</div>\n\n\n然后，在 CSS 中设置侧边栏的宽度和主体内容的宽度，并使用 CSS 的transition 属性来实现侧边栏的隐藏效果，如下所示：\n\ncss\n/* 侧边栏样式 */\n.layui-side {\n width: 200px; /* 侧边栏宽度 */\n transition: width 0.3s; /* 侧边栏隐藏过渡效果 */\n}\n\n/* 主体内容样式 */\n.layui-body {\n width: calc(100% - 200px); /* 主体内容宽度为窗口宽度减去侧边栏宽度 */\n transition: width 0.3s; /* 主体内容宽度过渡效果，与侧边栏保持一致 */\n}\n\n/* 侧边栏隐藏时的样式 */\n.layui-layout-admin.layui-layout-admin-side-hide .layui-side {\n width: 0; /* 侧边栏隐藏后宽度为0 */\n}\n\n/* 侧边栏隐藏时主体内容的样式 */\n.layui-layout-admin.layui-layout-admin-side-hide .layui-body {\n width: 100%; /* 主体内容宽度为窗口宽度 */\n}\n\n\n接下来，使用 JavaScript 来动态添加或删除layui-layout-admin-side-hide类，实现侧边栏的隐藏和显示，如下所示：\n\njavascript\n// 隐藏侧边栏\nfunction hideSidebar() {\n var layout = $('.layui-layout-admin');\n layout.addClass('layui-layout-admin-side-hide');\n}\n\n// 显示侧边栏\nfunction showSidebar() {\n var layout = $('.layui-layout-admin');\n layout.removeClass('layui-layout-admin-side-hide');\n}\n\n\n通过调用hideSidebar和showSidebar函数，可以实现隐藏和显示侧边栏的效果，同时右边主体内容的宽度会自动适应窗口大小。