javascript - MegaMenu 在打开另一个菜单项时不会关闭子菜单

Question

我的 MegaMenu 有一个小问题，当我打开一个子菜单(单击主菜单的一个元素)时，我希望当我单击文档主体上的任意位置或选择其他菜单项时该子菜单消失，上一个子菜单必须关闭，如果我单击该子菜单('ul')，或子菜单上的一个特定元素，它会像我想要的那样工作(它关闭)，但如果我单击其他菜单项，上一个子菜单保持打开状态，创建图层我必须单击才能使它们消失的子菜单(或单击使它们出现的主菜单项)我不确定我是否清楚， 我正在使用的 JS 函数:

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

所以我的代码有点乱:

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

Answer 1

Break，我相信我理解了这个问题。

首先您必须检查您要打开的元素是否已经打开。如果打开你将关闭如果不是你将打开。

      $(".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();
            }
          }
      });

然后你需要另一个函数来验证用户是否点击了另一个不是菜单的地方来关闭子菜单。

     $("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;
        }
      });

看看这是否对您有帮助: https://codepen.io/beduardo/pen/zReyjj

提示:我建议避免使用，仅标记来引用 js 中的元素。这可能会成为 future 的问题。