AdminLTE - data-widget=tree - Открыть меню по умолчанию

Я использую AdminLTE в приложении Angular 4.

У меня есть ссылки в левом меню, я использовал data-widget="tree" для отображения левого меню.

Вот так выглядит в открытом состоянии:

введите здесь описание изображения

И вот так, когда он закрыт:

введите здесь описание изображения

Я хочу, чтобы меню открывалось по умолчанию при загрузке страницы, я не могу найти параметр для этого в документация

Одно из решений, которое я могу придумать, - это вызвать щелчок от компонента при инициализации компонента, но я не знаю, как этого добиться, поскольку я не могу динамически генерировать ссылочные переменные шаблона.


angular treeview adminlte
person Tonio    schedule 17.10.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я знаю, что это старый вопрос, но у меня была такая же проблема. Я пробовал многие из предложенных решений, но ни одно из них не сработало для меня. Возможно, потому что я перешел на 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>

Преимущество этого метода заключается в том, что вы можете выбрать определенные подменю, которые будут открываться при загрузке, в то время как многие другие решения открывают все подменю сразу. Надеюсь, это поможет кому-то...

person Chris P. Bacon    schedule 25.01.2019

arrow_upward
1
arrow_downward

У меня тоже проблема. И найти ответ здесь.

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

Надеюсь быть полезным и для вас.

person Yvan    schedule 25.10.2017