[Solved] Block-Category Level 4+ Bug in community-theme-default

[CHitzmann]

Hello,

i think i found a Bug. I'm having 4 Levels for my Categories, but when i click on the expand-button of level 3 the module doesn't show up the Level 4 items. It closes the Level 3 instead, so only level 1 and 2 are showing. I can than reopen level 3, but level 4 is never showed this way. But when i click on a link to a level 3 Category, the menu is showed correctly, with all 4 Levels opened. I edited the CSS for this module in the themes folder to add the styles for level 4. But i think there has to be something added in the JS part of this Module, too. But i cannot find, where the problem is...

I'm using TB 1.0.3 (Migrated from a PS 1.6.1.11) and the new community-theme-default. Module Settings are: * Show from root-category * max. depth: 4 * dynamic: yes * sort by position * sort ascending * Footerrows: 1

[SLiCK_303]

I confirmed this. I dont know if it's a bug in the module, or the theme...

[SLiCK_303]

It's a theme thing, I just tried to use a ps1.6.1.17 theme, and although it looks different, it works.

[CHitzmann]

Thank you for confirming this. I was just wondering, if i was doing something wrong and no other one see this problem. Like i mentioned in my first post, the 4th Level is also showing up, if you open the category-page of an level 3 category. So it must be something in the Theme and i think it's something wrong in the JS Part of the blockcategories.tpl of the Theme.

And i think the CSS Part for a single level should be dynamically added (especially the padding-left). Now you have to edit the CSS file for every level >3.

i will have a look, if i can find, what's going wrong in the JS part, but any help with this will be welcome.

[CHitzmann]

I'm getting closer. I commented out this Line: // $collapse.filter('.collapse.in').not($targetAndParents).collapse('hide'); Now all Levels are shown. But of course it now doesn't automatically close the Levels, if you select another level. But i think there is only a Problem with the $targetAndParents ...

[CHitzmann]

OK. The Problem is the following:

The function $collapse.on('show.bs.collapse', function() {...} is called recursive starting at level 4 than 3 than 2 (Not 1, because this is always shown). The $target and $targetAndParents are renewed in each call. The $collapse is holding all menuitems. Than we use a filter on $collapse to see only items with subelements opened, remove all items from $targetAndParents from this list and hide all remaining elements on the list. In the first call of the function the $target is the level 4 and the parents level 3 and level 2, so this items are removed from the List. -> no Problem In the second call $target is level 3 and parents level 2 so they are removed from the list and level 4 has no child-elements, so this is also not on the list. -> no Problem And in the third call $target is level 2 and parents are empty so only level 2 is removed from the list and level 4 still has no child's and is also not on the list, but what about level 3? It is still on the list and therefore it get's closed. -> Here it is. Our Problem. Now we have the Problem. Now we can fix this...

[CHitzmann]

The solution is very easy. We add the event Object to the function, and see, if the actual Target is the trigger of this function and let the function do it things only once. This also keeps some time, because the function run only once (yes it will still be triggered many times, but only check the if...) Here is how the function looks like, now: ``` $collapse.on('show.bs.collapse', function(e) { if ($(this).is(e.target)) { var $target = $(this); var $targetAndParents = $target.parents().filter('.collapse').add($target);

    // Collapse all other menus which are not in the current tree
    $collapse.filter('.collapse.in').not($targetAndParents).collapse('hide');

    // Add 'active' class to triggers which show this element
    $triggers.filter('[href="#' + $target.prop('id') + '"],' +
      '[data-target="#' + $target.prop('id') + '"]').parent().addClass('active');
  }
});

```

[SLiCK_303]

Nice job, works for me as well...