树形插件

Treeview 插件将嵌套列表转换为可折叠的树形结构，子菜单在点击时展开和收起。演示仪表板中的侧边栏导航就是由它驱动的。

用法
Data 属性

在父级 <ul> 或 <ol> 上添加 data-lte-toggle="treeview"。在其内部，使用 .nav-item 标记包含子项的条目，并将子菜单放在嵌套的 <ul class="nav-treeview"> 中： 

<ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu">
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="nav-icon bi bi-speedometer"></i>
      <p>仪表盘</p>
    </a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">
      <i class="nav-icon bi bi-folder"></i>
      <p>
        报告
        <i class="nav-arrow bi bi-chevron-right"></i>
      </p>
    </a>
    <ul class="nav nav-treeview">
      <li class="nav-item">
        <a href="#" class="nav-link"><i class="nav-icon bi bi-circle"></i><p>销售</p></a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link"><i class="nav-icon bi bi-circle"></i><p>交易</p></a>
      </li>
    </ul>
  </li>
</ul>

若要让子菜单在初始时已展开，请在其 .nav-item 上添加 menu-open。

配置

通过父级 <ul> 上的 data-* 属性进行配置：

属性 默认值 描述
data-accordion true 当一个子菜单打开时，关闭其他已打开的子菜单。设为 false 可启用非手风琴模式（允许多个子菜单同时打开）。
data-animation-speed 300 滑动动画的持续时间（毫秒）。设为 0 可禁用动画。 
<!-- 非手风琴模式：多个子菜单可以保持打开状态 -->
<ul class="nav sidebar-menu" data-lte-toggle="treeview" data-accordion="false">
  …
</ul>

<!-- 更快的动画 -->
<ul class="nav sidebar-menu" data-lte-toggle="treeview" data-animation-speed="150">
  …
</ul>
CSS 类
类名 应用位置 描述
menu-open .nav-item (子菜单的父级元素) 表示该子菜单当前处于展开状态。
nav-treeview <ul> （嵌套的） 标记子菜单，以便插件识别它。
nav-arrow .nav-link 内的 <i> 箭头图标，在子菜单打开时会旋转。
事件
事件 描述
expanded.lte.treeview 当子菜单打开时，在对应的 .nav-item 上触发。
collapsed.lte.treeview 当子菜单关闭时，在对应的 .nav-item 上触发。
load.lte.treeview 在每次页面加载时，为所有已通过 menu-open 类展开的子菜单触发一次。 
document.addEventListener("expanded.lte.treeview", (e) => {
  console.log("在内部打开子菜单：", e.target)
})
调用方式
import { Treeview } from "admin-lte"

const item = document.querySelector(".sidebar-menu .nav-item")
const tv = new Treeview(item, { accordion: true, animationSpeed: 300 })

tv.open()    // 展开项目子菜单
tv.close()   // 收起
tv.toggle()  // 切换
方法
方法 返回值 描述
open() void 展开子菜单。如果 accordion 为 true，则先关闭同级子菜单。触发 expanded.lte.treeview 事件。
close() void 收起子菜单。触发 collapsed.lte.treeview 事件。
toggle() void 根据当前状态调用 open() 或 close()。
示例