Adminlte: how to do to treeview-menu always open?

[ZivHsu]

I want to my treeview-menu always open,

But when user click it will close or open once and does not affect other treeview-menu

like this

How to do it?

[REJack]

For this you need to modify the app(.min).js.

[ZivHsu]

Hi @REJack

I try to modify the app(.min).js

$(document).on("click", a + " li a", function (a) { var d = $(this), e = d.next(); if (e.is(".treeview-menu") && e.is(":visible")) e.slideUp(c, function () { e.removeClass("menu-open") }), e.parent("li").removeClass("active"); else if (e.is(".treeview-menu") && !e.is(":visible")) { var f = d.parents("ul").first(), g = f.find("ul:visible").slideUp(c); //g.removeClass("menu-open"); var h = d.parent("li"); e.slideDown(c, function () { e.addClass("menu-open"), f.find("li.active").removeClass("active"), h.addClass("active"), b.layout.fix() }) } e.is(".treeview-menu") && a.preventDefault() })

But i just no have idea where is remove other treeview-menu when it open?

[REJack]

IGNORE IT :D

[REJack]

Sorry miss i understood you before :/ but now it should work for you 😄

  $.AdminLTE.tree = function (menu) {
    var _this = this;
    var animationSpeed = $.AdminLTE.options.animationSpeed;
    $(document).off('click', menu + ' li a')
      .on('click', menu + ' li a', function (e) {
        //Get the clicked link and the next element
        var $this = $(this);
        var checkElement = $this.next();

        //If the menu is not visible open it
        if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
          //Get the parent menu
          var parent = $this.parents('ul').first();
          //Get the parent li
          var parent_li = $this.parent("li");

          //Open the target menu and add the menu-open class
          checkElement.slideDown(animationSpeed, function () {
            //Add the class active to the parent li
            checkElement.addClass('menu-open');
            parent_li.addClass('active');
            //Fix the layout in case the sidebar stretches over the height of the window
            _this.layout.fix();
          });
        }
        //if this isn't a link, prevent the page from being redirected
        if (checkElement.is('.treeview-menu')) {
          e.preventDefault();
        }
      });
  };

This is the code form the app.js not app.min.js, you need to replace the whole AdminLTE.tree function.

[ZivHsu]

Hi @REJack

It's work in your dropbox.

Thank you very much~

[ZivHsu]

Hi @REJack

when I use mobile view the first time this will no response in treeview-menu

but when i close and open again it was work...

did you have any idea?

[almasaeed2010]

This is feature is now supported (needs testing) in AdminLTE v2.4. You may upgrade by following this guide: https://adminlte.io/docs/2.4/upgrade-guide

If the issue persists or if you find different problems, please open a new issue.

Thanks!

[yjarosz]

Following the upgrade guide + adding data-api="tree" data-accordion=0 to my sidebar menu worked perfectly => doc.

[arnuschky]

Weird - doesn't work for me. I upgraded to v2.4 following the upgrade doc. This is my code:

          <ul class="sidebar-menu" data-widget="tree" data-api="tree" data-accordion=0>
            <li class="treeview">
              <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
                <span class="pull-right-container">
                   <i class="fa fa-angle-left pull-right"></i>
                </span>
              </a>
              <ul class="treeview-menu">
                <li><a href="#">Link in level 2</a></li>
                <li><a href="#">Link in level 2</a></li>
              </ul>
            </li>
          </ul>

What works fine is that I can open multiple submenus at once. However, I want to have this menu open on pageload. Any idea how I can do that?

[namvvo]

actually, all you need to do is just adjust the adminlte-2.x.css a bit.

.sidebar-menu .treeview-menu {
display: none; // remove this will show all sub menus
list-style: none;
padding: 0;
margin: 0;
padding-left: 5px;
}

[arnuschky]

Thanks! This worked.

I couldn't find this section in the adminlte css file, so I simply added style="display: block" to my html element/custom css. This is a nicer fix in any case, as I can configure this per element.

[deshario]

I am using in yii2 ... how to open it always ?

[
'label' => 'Tools',
'icon' => 'cog',
'url' => '#',
'items' => [
['label' => 'Verifications', 'icon' => 'qrcode', 'url' => ['donation-verified/index'],],
['label' => 'Profile', 'icon' => 'user-o', 'url' => ['user/profile'] ],
['label' => 'Decryption', 'icon' => 'user-o', 'url' => ['user/hashing'] ],
['label' => 'Logout', 'url' => ['site/logout'], 'template' => '{label}'],
],
]

[oesah]

You can also just use <li class="treeview active"> and it will be open by default.