Treeview 插件

优质

小牛编辑

137浏览

2023-12-01

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

用法

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

数据 API

将 data-widget="treeview" 添加到任何 ul 或 ol 元素以激活插件。

<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)

选项

名称	类型	默认	说明
animationSpeed	Number	300	上下滑动动画速度，以毫秒为单位。
accordion	Boolean	TRUE	展开菜单时是否折叠打开的菜单。
trigger	String	`[data-widget="treeview"] .nav-link`	响应展开或折叠菜单元素的选择器。
expandSidebar	Boolean	FALSE	是否在菜单上展开侧边栏。
sidebarButtonSelector	String	`[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)