3

When i click on 2nd level menu in mobile it collapse all active menu. I tested this on default theme also. it also happening there. I think its default issue.

How can i prevent it to stop collapse all menu and only collapse current menu?

1

I had managed this issue by custom jquery and css to solve. This might help someone.

Javascript Code Below:

require(['jquery', 'jquery/ui'], function($){
// ... Irrelevant code omitted ...
$(document).ready(function() {
// ... Irrelevant code omitted ...
$('li.level0 li.parent > a').prepend('<span class="rm-expand close"></span>');

jQuery('.navigation .columns-group li.level1.parent > a').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    jQuery(this).children("span.rm-expand").trigger("click");
    return false;
});

$('.rm-expand').click(function() {

   $(this).parent().parent().parent().siblings().children('.ui-menu-item').removeClass("lichild_clicked");
   $(this).parent().parent().parent().siblings().children('.ui-menu-item').children('ul').slideUp();
   $(this).parent().parent().parent().siblings().children('.ui-menu-item').children('a').children('.rm-expand').removeClass('open').addClass('close');

   if ($(this).hasClass('open')) {
     $(this).parent().parent().find('ul:first').slideUp();
     $(this).parent().parent().removeClass("lichild_clicked");
     $(this).removeClass('open');
     $(this).addClass('close');
     $(this).html('&#58914;');
   } else {
     $(this).parent().parent().find('ul:first').slideDown();
     $(this).addClass('open');
     $(this).parent().parent().addClass("lichild_clicked");
     $(this).removeClass('close');
     $(this).html('&#58913;');
   }
   return false;
});
// ... Irrelevant code omitted ...
});

CSS Code Below

li.level0 ul {
     display:none;
}
li.level0 ul a {
     position:relative;
}
.rm-expand {
     float:right;display:block;font-family: 'icons-blank-theme';font-size:42px;position:absolute;right: 7px;top: -6px;
}

Reference: Magento 2 - 3rd level menu items collapsed on mobile devices

Note: It may require some css changes as per your theme.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.