layui设置仅展开一个下拉栏

如果你使用的是 layui 的下拉菜单组件，你可以设置其 `accordion` 属性为 `true`，这样每次只能展开一个下拉菜单，其他的下拉菜单会自动关闭。

示例如下：

<div class="layui-nav">
  <ul class="layui-nav-bar">
    <li class="layui-nav-item"><a href="/">首页</a></li>
    <li class="layui-nav-item layui-nav-itemed" accordion="true">
      <a href="javascript:;">产品</a>
      <dl class="layui-nav-child">
        <dd><a href="/product/list">产品列表</a></dd>
        <dd><a href="/product/detail">产品详情</a></dd>
      </dl>
    </li>
    <li class="layui-nav-item"><a href="#">关于</a></li>
    <li class="layui-nav-item"><a href="#">联系我们</a></li>
  </ul>
</div>

在上面的代码中，我们将第二个菜单项的 `accordion` 属性设置为 `true`，表示每次只能展开一个下拉菜单。

如果你想自定义只展开一个下拉菜单的实现方式，可以使用 JavaScript 代码来监听下拉菜单的点击事件，在点击时将其他下拉菜单关闭。下面是一个示例代码：

<div class="layui-nav" id="nav">
  <ul class="layui-nav-bar">
    <li class="layui-nav-item"><a href="/">首页</a></li>
    <li class="layui-nav-item">
      <a href="javascript:;">产品</a>
      <dl class="layui-nav-child">
        <dd><a href="/product/list">产品列表</a></dd>
        <dd><a href="/product/detail">产品详情</a></dd>
      </dl>
    </li>
    <li class="layui-nav-item"><a href="#">关于</a></li>
    <li class="layui-nav-item"><a href="#">联系我们</a></li>
  </ul>
</div>

<script>
layui.use(['jquery', 'element'], function() {
  var $ = layui.jquery,
      element = layui.element;

  $('#nav .layui-nav-item').on('click', function() {
    var $item = $(this);
    if (!$item.hasClass('layui-nav-itemed')) {
      // 关闭其他展开的下拉菜单
      $('#nav .layui-nav-item.layui-nav-itemed').removeClass('layui-nav-itemed');
    }
  });
});
</script>

在上面的代码中，我们使用 jQuery 监听了 `#nav .layui-nav-item` 元素的点击事件，当点击时判断当前是否为展开的下拉菜单，如果不是，则关闭其他已经展开的下拉菜单。