layui侧边伸缩

Layui提供了非常方便的侧边伸缩功能，可以通过简单的配置实现。以下是一个简单的示例代码：

<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <!-- 头部区域 -->
  </div>
  
  <div class="layui-side layui-bg-black">
    <!-- 左侧导航区域 -->
    <div class="layui-side-scroll">
      <!-- 侧边栏内容 -->
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 中间主体区域 -->
  </div>
</div>

<script src="layui.js"></script>
<script>
  layui.use('element', function(){
    var element = layui.element;
    
    //监听侧边伸缩
    element.on('nav(layadmin-system-side-menu)', function(elem){
      //获取当前点击的元素
      var target = elem.currentTarget;
      //获取当前点击元素的子元素
      var child = target.children[1];
      //判断子元素是否存在
      if(child){
        //切换伸缩状态
        $(child).slideToggle();
      }
    });
  });
</script>

在这段代码中，我们使用了Layui的布局组件来构建页面结构。`layui-layout-admin` 是一个预定义的样式类，可以让页面布局更加美观。`layui-header`、`layui-side`、`layui-body` 分别代表页面的头部、侧边栏和主体区域。其中，侧边栏使用了 `layui-bg-black` 样式类来设置背景色为黑色。

在侧边栏的内容区域中，我们可以放置菜单或其他组件。在这个示例中，我们使用了 `layui-nav` 和 `layui-nav-tree` 组件来构建一个简单的树形菜单。

在 JS 部分，我们使用了 `layui.use` 方法来加载 `element` 模块。然后，我们监听了侧边栏菜单的点击事件，当用户点击菜单时，我们获取当前点击的元素和它的子元素，然后切换子元素的伸缩状态。

最后，我们需要引入 `layui.js` 文件来启用 Layui 组件。