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

所以我的代码有 fiddle：

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 中使用标签来引用您的元素。这可能是将来的问题。

Answer 2

谢谢你我的朋友Bruno Eduardo，我相信你懂葡萄牙语！！ Obrigado 朋友!! 只有一个小错误，它只有在您单击按钮时才有效，如果您单击图像则它不起作用，要解决此问题，您需要将 menu-button 添加到 link 中的每个标签。例如：

<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>

谢谢朋友！

Answer 3

是的，我懂葡萄牙语 =)。这种方法很好，另一种方法改进了验证用户是否在其他地方单击的功能。

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

随意选择对你来说更好的=)

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

MegaMenu doesn't close submenu when open another menu item

html

javascript

css

megamenu