AdminLTE - data-widget="tree" - 默认打开菜单答案

【问题标题】：AdminLTE - data-widget="tree" - Open menu by defaultAdminLTE - data-widget="tree" - 默认打开菜单
【发布时间】：2017-10-17 13:57:00
【问题描述】：

我在 Angular 4 应用程序中使用 AdminLTE。

我在左侧菜单上有链接，我使用 data-widget="tree" 来显示左侧菜单。

打开时是这样的：

当它关闭时是这样的：

我想在页面加载时默认打开菜单，我在 documentation 中找不到此选项

我能想到的一个解决方案是在组件初始化时触发组件的点击，但我不知道如何实现这一点，因为我无法动态生成template reference variables.

【问题讨论】：

标签： angular treeview adminlte

【解决方案1】：

我知道这是一个老问题，但我遇到了同样的问题。我尝试了许多提供的解决方案，但没有一个对我有用。可能是因为我切换到了 AdminLTE 2.4.x，现在基于 javascript 的解决方案不再工作了。

这是一种仅基于 CSS 和对 HTML 代码进行一些操作的简单方法。但它会在加载时打开一个特定的树视图菜单并保留 tree.js 插件的功能。

首先：像这样提供一个新的自定义 CSS 类...

.treeview-menu-visible {
    display: block;
}

第二：像这样操作HTML模板...

您必须将“menu-open”类添加到“treeview”列表元素和“treeview-menu”列表中。然后将自定义 CSS 类另外添加到“treeview-menu”列表中。

<ul class="sidebar-menu" data-widget="tree">
    <li class="header">Headline</li>
        <li class="treeview menu-open">
            <a href="#">
                <i class="fa fa-search"></i><span>Search</span>
                <span class="pull-right-container">
                    <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
            <ul class="treeview-menu menu-open treeview-menu-visible">
                <li><a href="#"><i class="fa fa-user"></i> Example</a></li>
                <li><a href="#"><i class="fa fa-lock"></i> Example</a></li>
            </ul>
        </li>
    </li>
</ul>

这种方法的优点是您可以选择在加载时打开特定的子菜单，而许多其他解决方案一次打开所有子菜单。希望这可以帮助某人...

【讨论】：

【解决方案2】：

我也遇到了问题。并在这里找到答案。

https://stackoverflow.com/a/46256226/7353073

希望对你也有用。

【讨论】：