MegaMenu doesn't close submenu when open another menu item

Question

I have a little problem with my MegaMenu, when i open a submenu (clicking on one item of main menu) i want that submenu to vanish when i click anywhere on the document body or if i choose other menu item, the the previous submenu has to close, if i click on that submenu ('ul'), or one particular item on submenu it works like i want (it closes), but if i click on other menu item the previous submenu keeps opened, creating layers of submenus that i have to click on to make them vanish (or click on the main menus item that make them appear) im not sure i am clear, The function JS im using:

$(".menu > ul > li").click(function(e) {
              if ($(window).width() > 943) {
                  $(this).children('ul').fadeToggle(15);
                  $(this).children('ul').toggleClass('center');
                  e.preventDefault();
              }
          });

so there's a fiddle of my code:

https://codepen.io/anon/pen/JpBrRp

Answer 1

Break, I believe i understood the problem.

First you have to check if the element wich you want to open is already open. If is open you will to close if not you will open.

      $(".menu > ul > li").click(function(e) {
          if ($(window).width() > 943) { 
            if ($(this).children('.menu-list').is(":visible")){
               $(this).children('.menu-list').fadeToggle(15);
               $(this).children('.menu-list').toggleClass('center');
              e.preventDefault();
            } else {
               $('.menu-list').hide();
               $('.menu-list').removeClass('center');
               $(this).children('.menu-list').fadeToggle(15);
               $(this).children('.menu-list').toggleClass('center');
              e.preventDefault();
            }
          }
      });

Then you need another function to verify if the user clicked in another place that was not the menu to close the submenu.

     $("body").click(function(e) {
         var target = e.target;
        if (target.className.indexOf("menu-button") == -1 && target.offsetParent.className.indexOf("menu-button") == -1 ) {
              $('.menu-list').hide();
              $('.menu-list').removeClass('center');
            return;
        }
      });

See if this help you: https://codepen.io/beduardo/pen/zReyjj

Tip: I recommend avoid use, only tag to refer your elements in js. This can be a problem in the future.

Answer 2

Thank you my friend Bruno Eduardo, i believe you understand Portuguese!! Obrigado amigo!! There's only one minor bug, it only work if you click on the button, if you click on image it doesn't work, to fix that you need to add menu-button to every tag inside your link. ex:

<a role="button" class="button button4 **menu-button**"><i class="icon-crm fs1 icon **menu-button**"></i><span class="button-text rowcenter **menu-button**">{{'MenuItem1' | translate}}</span></a>

Thank you friend!

Answer 3

Yes, i understand portuguese =). This approach is good, an other way is improved the function wich verify if the user clicked in another place.

if (target.className.indexOf("menu-button") == -1 && target.offsetParent.className.indexOf("menu-button") == -1 )

Feel free to choose the better to you =)