Treeview Plugin

樹狀檢視外掛程式將巢狀清單轉換為樹狀檢視，其中子選單可以展開。

使用方式

此外掛程式可以作為 jQuery 外掛程式啟用，或使用 data api 啟用。

Data API

將 data-widget="treeview" 新增至任何 ul 或 ol 元素以啟用此外掛程式。

<ul data-widget="treeview">
  <li><a href="#">One Level</a></li>
  <li class="nav-item">
    <a class="nav-link" href="#">Multilevel</a>
    <ul class="nav-treeview">
      <li><a href="#">Level 2</a></li>
    </ul>
  </li>
</ul>

jQuery

$('ul').Treeview(options)

選項

名稱	類型	預設值	描述
animationSpeed	數字	300	滑動向下/向上動畫的速度，以毫秒為單位。
accordion	布林值	TRUE	是否在展開另一個選單時摺疊開啟的選單。
trigger	字串	`[data-widget="treeview"] .nav-link`	應該回應點擊並導致展開或摺疊其兄弟子選單的元素選擇器。
expandSidebar	布林值	FALSE	是否在開啟選單時展開側邊欄。
sidebarButtonSelector	字串	`[data-widget="pushmenu"]`	側邊欄按鈕的選擇器。

提示！

您可以透過 data-attributes 使用任何選項，如下所示。
<ul data-widget="treeview" data-accordion="false">...</ul>

重要！

如果您想在主側邊欄樹狀檢視旁邊使用多個樹狀檢視，則需要在所有樹狀檢視中新增 ID 標籤。
<ul data-widget="treeview" id="someIdNameOrSo" data-accordion="false">...</ul>

事件

事件類型	描述
expanded.lte.treeview	在子選單展開後觸發。
collapsed.lte.treeview	在子選單摺疊後觸發。
load.lte.treeview	透過 data api 初始化外掛程式後觸發。

範例：$('ul').on('expanded.lte.treeview', handleExpandedEvent)