Expand but auto Collapse after

[petro]

Hi and thank you for this nice tool.

I have generated the following menu using KNP Menus and Nested Sets in Symfony and I behave the following issue:

when in mobile and click on the + buttons which appear at the right side of each li item, I get the expand behavior but the menu collapse immediatelly back.

The menu structure I did used is:
<ul class=”nav navbar-nav sm sm-blue sm-collapsible” id=”main-menu” data-smartmenus-id=”15487651135439114″>
<li class=”only-full”> 1
<li class=”only-full”> <a href=”/app_dev.php/categorii/2.html” class=”has-submenu” id=”sm-15487651135366206-1″
aria-haspopup=”true” aria-controls=”sm-15487651135366206-2″ aria-expanded=”false”> 2 <span class=”sub-arrow”></span>
<ul class=”menu_level_1″ id=”sm-15487651135366206-2″ role=”group” aria-hidden=”true” aria-labelledby=”sm-15487651135366206-1″
aria-expanded=”false” style=”width: auto; display: none;”>
<li class=”only-full first”> <a href=”/app_dev.php/categorii/2-1.html” class=”has-submenu” id=”sm-15487651135366206-3″
aria-haspopup=”true” aria-controls=”sm-15487651135366206-4″ aria-expanded=”false”> 2.1 <span class=”sub-arrow”></span>
<ul class=”menu_level_2″ id=”sm-15487651135366206-4″ role=”group” aria-hidden=”true” aria-labelledby=”sm-15487651135366206-3″
aria-expanded=”false” style=”width: auto; display: none;”>
<li class=”only-full first”> 2.1.1
<li class=”only-full last”> 2.1.2

<li class=”only-full last”> <a href=”/app_dev.php/categorii/2-2.html” class=”has-submenu” id=”sm-15487651135366206-5″
aria-haspopup=”true” aria-controls=”sm-15487651135366206-6″ aria-expanded=”false”> 2.2 <span class=”sub-arrow”></span>
<ul class=”menu_level_2 sm-nowrap” id=”sm-15487651135366206-6″ role=”group” aria-hidden=”true”
aria-labelledby=”sm-15487651135366206-5″ aria-expanded=”false” style=”width: auto; min-width: 10em; display: none; max-width: 20em; top: auto; left: 0px; margin-left: 136px; margin-top: -46.6667px;”>
<li class=”only-full first”> 2.2.1
<li class=”only-full last”> 2.2.2

<li class=”only-full last”> 3

Can you please tell me how to fix it ?

I’ve tried to add in my document ready

/* Smart menus */
$(‘#main-menu’).smartmenus();
/* fix the not opening when mobile */
$( “.sub-arrow” ).on( “click”, function() {
$(“input[type=checkbox]”).each(function () {
$(this).parent().trigger(‘click’);
console.log(‘clicked’);
});
});

and I see clicked 3 times with that code above.

If run in the console $(‘.sub-arrow’).parent().trigger(‘click’) I get the correct expand.
How to fix the on click in my case ? What I am doing wrong, please ?

[petro]

I am just now deactivating several css I am using there and it seems to be related to some other checkboxes I have for the GDPR on the same page ?

[petro]

This is the menu I am generating with JS disable

<ul class="nav navbar-nav sm sm-mint" id="main-menu">
    <li class="only-full first"> <a href="/app_dev.php/categorii/noutati.html">
            Noutati
        </a>
    </li>
    <li class="only-full"> <a href="/app_dev.php/categorii/1.html">
            1
        </a>
    </li>
    <li class="only-full"> <a href="/app_dev.php/categorii/2.html">
            2
        </a>
        <ul class="menu_level_1">
            <li class="only-full first"> <a href="/app_dev.php/categorii/2-1.html">
                    2.1
                </a>
                <ul class="menu_level_2">
                    <li class="only-full first"> <a href="/app_dev.php/categorii/2-1-1.html">
                            2.1.1
                        </a>
                    </li>
                    <li class="only-full last"> <a href="/app_dev.php/categorii/2-1-2.html">
                            2.1.2
                        </a>
                    </li>
                </ul>
            </li>
            <li class="only-full last"> <a href="/app_dev.php/categorii/2-2.html">
                    2.2
                </a>
                <ul class="menu_level_2">
                    <li class="only-full first"> <a href="/app_dev.php/categorii/2-2-1.html">
                            2.2.1
                        </a>
                    </li>
                    <li class="only-full last"> <a href="/app_dev.php/categorii/2-2-2.html">
                            2.2.2
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="only-full last"> <a href="/app_dev.php/categorii/3.html">
            3
        </a>
    </li>
</ul>

[petro]

Please close this as the menu structure I used was different ;). Thnak you

[Author]

Posts