Layui怎么实现左侧菜单栏的手风琴效果（点开一个关闭其他）-Layui教程-PHP中文网

layui 2.x 的 layui.nav 不支持手风琴，需手动监听 .layui-nav-item > a 点击事件，移除兄弟项的 layui-nav-itemed 类并切换当前子菜单显隐；layui 3.x 则原生支持 accordion: true 的 tree 组件。

layui 2.x 中 `layui.nav` 不支持手风琴，得自己加逻辑

layui 2.x 的 layui.nav 组件本身没有内置「展开一个、收起其余」的手风琴行为，它默认是独立开关。你点开 a，再点开 b，a 还开着——这不是 bug，是设计如此。要实现手风琴，必须监听点击，手动控制其他子菜单的 layui-nav-itemed 类状态。

常见错误现象：layui-nav 嵌套了 layui-nav-child，但所有子菜单能同时展开；或者用了 layui-nav-tree 却发现折叠/展开全靠点击图标，不响应菜单项文字点击。

只对带 layui-nav-item 的父级菜单绑定点击，别误绑到 layui-nav-child 内部的 a
用 $(this).next('.layui-nav-child') 找当前要切换的子菜单，别用 find 或 children 错位操作
收起其他时，只操作「同级」的 layui-nav-item 下的 layui-nav-child，避免影响二级以下嵌套（如果存在）

用 jQuery 模拟手风琴：监听 `.layui-nav-item > a` 点击

这是最轻量、兼容性最好的做法，不依赖 layui 的模块加载机制，也不动原生渲染逻辑。核心就是：点一个，把所有兄弟的 layui-nav-itemed 移除，再给当前加；同时控制对应子菜单的显隐。

使用场景：你已用 layui.use(['element'], ...) 初始化了导航，HTML 结构是标准的 <ul class="layui-nav layui-nav-tree"><li class="layui-nav-item"> <a>菜单</a><dl class="layui-nav-child">...</dl> </li></ul>。

示例代码片段：

$('.layui-nav-item > a').on('click', function(e) {
  e.preventDefault();
  var $this = $(this);
  var $child = $this.next('.layui-nav-child');
  
  // 收起所有同级子菜单
  $this.parent().siblings('.layui-nav-item').removeClass('layui-nav-itemed')
    .children('.layui-nav-child').removeClass('layui-nav-child-show');
  
  // 切换当前
  $this.parent().toggleClass('layui-nav-itemed');
  $child.toggleClass('layui-nav-child-show');
});

注意：layui-nav-child-show 是 layui 2.x 控制显示的类，不是自定义的；如果你用的是 layui 3.x（beta），类名可能变成 layui-show，需按实际检查 DOM。