AdminLTE

Question

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

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

打开后是这样的：

关闭时像这样：

我想在加载页面时默认打开菜单，我在 documentation

中找不到此选项

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

Answer 1

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

希望对你也有用。

Answer 2

我知道这是一个老问题，但我遇到了同样的问题。我尝试了很多提供的解决方案，但其中 none 对我有用。可能是因为我切换到 AdminLTE 2。4.x 现在基于 javascript 的解决方案不再有效了。

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

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

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

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

您必须将 class "menu-open" 添加到 "treeview" 列表元素和 "treeview-menu" 列表。然后将您的自定义 CSS class 添加到 "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>

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

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

AdminLTE - data-widget="tree" - Open menu by default

angular

treeview