toggle doesn't work when no sub-menu is present

[dzaeny]

Hi, I found out that toggle doesn't work right with items that don't have sub-menus.

For example:

<ul id="menu">
    <li><a href="#/page1">Page 1</a>
        <ul>
            <li><a href="#/sub-page1">Sub-page </a></li>
            <li><a href="#/sub-page2">Sub-page 2</a></li>
        </ul>
    </li>
    <li><a href="#/page2">Page 2</a></li>
</ul>

The problem is line 37 in the code:

$this.find("li").has("ul").children("a").on("click" + "." + pluginName, function(e) ...

Everything works fine when I remove .has("ul") from the code.

The thing is I'm working with angular and not using direct links but routing based on my location, so even when the link doesn't have a sub-menu, it still doesn't go to a new page but should toggle the other menus.

Cheers,
Jan Fucik

[serloal]

I have the same problem, I tried the new version 2.0.0 and the behaviour is the same in all versions.

Thanks.

[pballester]

+1, please can you fix it?

Thanks in advance!

[Zephyrante]

Same here! Any fixes?

[jirapatj]

<ul id="sidebar-left-menu">
   <li data="{autoShowFlg:0,menuUnder:''}" id="LSMS04000000">
      <a href="javascript:addNewTab('Admin','user.action',300)">
      <i class="glyphicon glyphicon-chevron-right"></i>&nbsp;&nbsp;
      <span class="sidebar-link1">ADMIN</span>
      </a>
      <!-- Sub menu -->
      <ul class="collapse" style="height: 0px;">
         <li data="{autoShowFlg:0,menuUnder:'LSMS04000000'}" id="LSMS04100000">
            <a href="#">
            &nbsp;&nbsp;<i class="glyphicon glyphicon-chevron-right"></i>&nbsp;&nbsp;
            <span class="sidebar-link1">MANAGEMENT</span>
            </a>
            <!-- Sub menu -->
            <ul class="collapse" style="height: 0px;">
               <li data="{autoShowFlg:0,menuUnder:'LSMS04100000'}" id="LSMS04110000">
                  <a href="javascript:addNewTab('Role Group','roleGroup.action',300)">
                  &nbsp;&nbsp;&nbsp;&nbsp;<i class="glyphicon glyphicon-chevron-right"></i>&nbsp;&nbsp;
                  <span class="sidebar-link1">ROLE GROUP</span>
                  </a>
               </li>
               <li data="{autoShowFlg:0,menuUnder:'LSMS04100000'}" id="LSMS04120000">
                  <a href="javascript:addNewTab('Role','role.action',300)">
                  &nbsp;&nbsp;&nbsp;&nbsp;<i class="glyphicon glyphicon-chevron-right"></i>&nbsp;&nbsp;
                  <span class="sidebar-link1">ROLE</span>
                  </a>
               </li>
               <li data="{autoShowFlg:0,menuUnder:'LSMS04100000'}" id="LSMS04130000">
                  <a href="javascript:addNewTab('User','user.action',300)">
                  &nbsp;&nbsp;&nbsp;&nbsp;<i class="glyphicon glyphicon-chevron-right"></i>&nbsp;&nbsp;
                  <span class="sidebar-link1">USER</span>
                  </a>
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

I have same problem. Sub of sub menu is not collapse when I click root menu to close toggle.

from code when I click menu "Admin" and click "MANAGEMENT". After that I click Admin for toggle close of all the menu "MANAGEMENT" level is toggle close. But "ROLE GROUP, ROLE, USER" is not close toggle.

Could you please fix that?

update : from version 1.1.3 i change from
$(this).parent("li").siblings().removeClass("active").children("ul.in").collapse("hide");
to
$(this).parent("li").find('li').removeClass("active").children("ul.in").collapse("hide");

[laszlof]

Same problem here. I'm using this with ember.js which uses single page routing, the toggle function does not work. Any fix for this?

Also. Going directly to a hash based route (http://dom.com/#/some/route) causes the menu to be fully expanded on load. Not sure if this is an issue with my setup, or with the plugin itself.

[laszlof]

I managed to fix the specific problem I was having by adding another "click" listener for the sub menu links.

    this.$element.find('li').not(':has(ul)').children('a').on('click.metisMenu', function() {
      if ($this.options.toggle) {
        var $parent = $(this).closest('ul.in');
        $this.hide($parent);
      }
    });

As for my second issue, it actually came down to having some matching (temporary) links that were going to "#", which matched the current page, so the plugin was marking them "active" and expanding the groups. Not really an issue with the plugin itself.

[lenamtl]

+1

[slimsoft]

Hi, here is a listener to inject into metisMenu which works fine.

var that = this;
this.$element.children('li').not(':has(ul)').children('a').on('click.metisMenu', function(e) {
  if ($this.options.toggle) {
    var $parent = that.$element.find('ul.in');
    $this.hide($parent);
  }
});

[jujoramos]

Hello there,

I'm having an issue similar to the one reported by @laszlof and I haven't been able to find the solution yet. I doesn't matter how deep the menu is, when the url ends with a hashtag (http://localhost/myApp/# as an example) the entire menu is fully expanded on load. Any thoughts on how to solve it?.
Cheers.

[harrywang]

Any solution to this? Thanks!!

[elvis7]

Replace your dummy href="#" with href="#any-word", worked for me. :)

[MoxFulder]

I think I have this problem too. My menu have some menus without submenus and some menus with submenus. When a menu with submenu is open, and I click on a menu without submenu, the previous menu with submenu open doesn't collapse.
I want to use metis release without modifying myself the lib. any idea ?

[PTC-JoshuaMatthews]

Please fix this! The fix from slimsoft from over a year ago works, why hasn't it been integrated? I don't want to edit a node module!

[gsag]

Please fix it!

[onokumus]

@dzaeny @serloal @pballester @Zephyrante @jirapatj @laszlof @lenamtl @slimsoft @jujoramos @harrywang @elvis7 @MoxFulder @PTC-JoshuaMatthews @gsag

Please try https://github.com/onokumus/metismenu/tree/parent-toogle

[MoxFulder]

I still have the same issue using the parent-toggle branch.

[notridan]

I have the same bug..

[setefocos]

Wow... what an old bug! I'm having this trouble now and just discovered this is here over 3 years!
@onokumus this menu is beautiful, and I really want to fix it to stay with it! Can you please do the fix suggested or help us with the better way to do it? Thank you for the component anyway!
Is parent-toggle a branch just to solve this problem? Will it be merged to master?

[pereiradiogo]

News?

[pereiradiogo]

Hi!
Hava the problem solved in this branch: https://github.com/pereiradiogo/metismenu/tree/fix_parent_menus

@onokumus Check de PR