active items after click have wrong arrows/classes

[xViBlackx]

I`ve implement the slicknav in the OXID eShop mobile view for one of our customers. There are a lot of subcategories, which should display active after click.

So my settings for the slicknav is following:

$(".menu").slicknav({
   appendTo: "#mainnav",
   label: "",
   allowParentLinks: true,
   'init': function() {
       var sMenuElement = $(".rhinos_menu");
       $(sMenuElement).prependTo(".slicknav_menu").show();
    },
    'beforeOpen': function() {
        $("#mainnav").removeClass("fadeIn");
     },
     'beforeClose': function() {
         $("#mainnav").addClass("fadeIn");
      },
});

I get the open items after click working, but the elements get the wrong arrow and hidden/close states. My li and a tags get an extra active state, from the standard shop logic, as you can see here:

<ul id="navigation" class="nav navbar-nav menu">
   <li class="[{if $homeSelected == 'false' && $ocat->expanded}]active[{/if}][{if $ocat->getSubCats()}] [{$dropdown}][{/if}]">
        <a href="[{$ocat->getLink()}]"[{if $ocat->getSubCats()}] class="[{$dropdownToggle}] [{if $homeSelected == 'false' && $ocat->expanded}]active[{/if}]" data-toggle="[{$dropdown}]"[{/if}]>
            [{$ocat->oxcategories__oxtitle->value}][{if $ocat->getSubCats() && $dropdown != ""}] <i class="fa fa-angle-down"></i>[{/if}]
        </a>

        [{if $ocat->getHasVisibleSubCats()}]
        <ul class="[{$dropdownMenu}]">
            [{foreach from=$ocat->getSubCats() item="osubcat" key="subcatkey" name="SubCat"}]
                [{if $osubcat->getIsVisible()}]
                    <li [{if $homeSelected == 'false' && $osubcat->expanded}]class="active subcat [{$dropdown}]"[{else}]class="subcat [{$dropdown}]"[{/if}]>
                        <a [{if $homeSelected == 'false' && $osubcat->expanded}]class="current active"[{/if}] href="[{$osubcat->getLink()}]">[{$osubcat->oxcategories__oxtitle->value}] [{if $osubcat->getHasVisibleSubCats() && $dropdown != ""}]<i class="fa fa-angle-right"></i>[{/if}]</a>
                        [{if $osubcat->getHasVisibleSubCats()}]
                        <ul class="[{$dropdownMenu}] subcatMenu">
                            [{foreach from=$osubcat->getSubCats() item="osubsubcat" key="subsubcatkey" name="SubSubCat"}]
                            [{if $osubsubcat->getIsVisible()}]
                            [{foreach from=$osubsubcat->getContentCats() item=osubcont name=MoreCms}]
                            <li>
                                <a href="[{$osubcont->getLink()}]">[{$osubcont->oxcontents__oxtitle->value}]</a>
                            </li>
                            [{/foreach}]

                            <li [{if $homeSelected == 'false' && $osubsubcat->expanded}]class="active"[{/if}]>
                                <a [{if $homeSelected == 'false' && $osubsubcat->expanded}]class="current active"[{/if}] href="[{$osubsubcat->getLink()}]">[{$osubsubcat->oxcategories__oxtitle->value}]</a>
                            </li>
                            [{/if}]
                            [{/foreach}]
                        </ul>
                        [{/if}]
                </li>
                [{/if}]
            [{/foreach}]
        </ul>
        [{/if}]
    </li>
</ul>

Is there an example on how to achieve the right action?