在 adminlte 3.0.2 树视图菜单中激活树视图菜单打开 - Javascript

在使用 adminlte 3.0.2 的树视图菜单时，经常需要控制菜单打开或关闭的状态来满足业务需求。本篇文章将介绍如何在 Javascript 中激活树视图菜单打开。

准备条件

在开始之前需要确保已经加载了 adminlte 的库文件和相关资源。

<!-- CSS -->
<link rel="stylesheet" href="adminlte.min.css">

<!-- JS -->
<script src="jquery.min.js"></script>
<script src="bootstrap.bundle.min.js"></script>
<script src="adminlte.min.js"></script>

实现步骤

1. 获取树视图菜单 首先需要获取到树视图菜单对应的 HTML 元素，可以通过类名或 ID 进行查找。

const treeViewMenu = document.getElementsByClassName('nav-sidebar')[0];

2. 获取需要打开的菜单 根据需要打开的菜单的 ID 或其他属性值，在树视图菜单中查找对应的子菜单元素。

const targetMenu = treeViewMenu.querySelector(`[data-widget="treeview"][data-treeview-id="${targetMenuId}"]`);

3. 激活菜单打开状态 通过修改菜单元素的类名，将其激活为打开状态。

targetMenu.classList.add('menu-open');

4. 设置父菜单状态 如果需要打开的菜单具有父菜单，则需要同时激活其父菜单为打开状态。

let parentMenu = targetMenu.parentNode.closest('li.has-treeview');

while (parentMenu !== null) {
  parentMenu.classList.add('menu-open');
  parentMenu = parentMenu.parentNode.closest('li.has-treeview');
}

结束语

通过以上步骤，我们可以在 Javascript 中激活树视图菜单打开。需要注意的是，激活打开状态的同时也需要考虑关闭状态的处理，以免出现不必要的显示问题。