Treeview 插件

优质
小牛编辑
136浏览
2023-12-01

Treeview 插件将嵌套列表转换为树形视图,可在其中扩展子菜单。

用法

该插件可以作为 jQuery 插件或使用数据 API 激活。

数据 API

data-widget="treeview" 添加到任何 ulol 元素以激活插件。

<ul data-widget="treeview">
  <li><a href="#">一级</a></li>
  <li class="treeview">
    <a href="#">多级</a>
    <ul class="treeview-menu">
      <li><a href="#">二级</a></li>
    </ul>
  </li>
</ul>

jQuery

$('ul').Treeview(options)
选项
名称类型默认说明
animationSpeedNumber300上下滑动动画速度,以毫秒为单位。
accordionBooleanTRUE展开菜单时是否折叠打开的菜单。
triggerString[data-widget="treeview"] .nav-link响应展开或折叠菜单元素的选择器。
expandSidebarBooleanFALSE是否在菜单上展开侧边栏。
sidebarButtonSelectorString[data-widget="pushmenu"]侧边栏按钮选择器。

你可以通过数据属性使用任何选项,像这样。

<ul data-widget="treeview" data-accordion="false">...</ul>

事件

事件类型说明
expanded.lte.treeview子菜单展开后触发。
collapsed.lte.treeview子菜单折叠后触发。
load.lte.treeview数据 API 初始化插件后触发。

示例: $('ul').on('expanded.lte.treeview', handleExpandedEvent)