如何删除切换课程时点击外部菜单

下拉菜单是用CSS和HTML/JS设计的，使用从JS添加的名为“is-open”的类。一旦出现在指定的HTML div内，它将激活CSS显示子菜单。如何删除切换课程时点击外部菜单

但是，有一个小问题，点击下拉菜单不会消失，除非点击相同的菜单项。（当点击菜单内容div之外时，该类将不会取消切换）

作为基本功能，只要用户不仅在菜单上点击，而且在页面上的任何位置点击该菜单，该菜单也必须消失。

我现在的javascript如下：

$(document).ready(function() { 
    $(".has-submenu").click(function(e) { 
     e.stopPropagation(); 
     if($(this).hasClass("is-open")) { 
     $(this).removeClass("is-open"); 
     } else { 
     $(".has-submenu").removeClass("is-open"); 
     $(this).addClass("is-open"); 
     } 
    }); 
});

下面是代码的codepen例如：https://codepen.io/anon/pen/EwMjrz

来源

2017-10-21 109881

[Hier只是一个很好的例子]（https://codepen.io/Ferhad/pen/OxZWNm） –

@FerhadOthman你的解决方案不起作用。它允许第一个菜单项（在这种情况下，“文章”）在div外单击时折叠，但是任何后续菜单项都不受影响。请参阅https://codepen.io/hioioasd90/pen/qPwBEW – 109881

第13行'var element = document.querySelector（“。has-submenu.is-open”）;'选择器必须是类is-open –

您可以添加事件侦听器的文件，关闭你的菜单，像这样

$(document).ready(function() { 
    $(".has-submenu").click(function(e) { 
    e.stopPropagation(); 
    if($(this).hasClass("is-open")) { 
     $(this).removeClass("is-open"); 
    } else { 
     $(".has-submenu").removeClass("is-open"); 
     $(this).addClass("is-open"); 
    } 
    }); 
    $(document).on('click', function (e) { 
    e.stopPropagation(); 
    $('.has-submenu').removeClass("is-open"); 
    }); 
});

这应该是诀窍！

来源

2017-10-21 10:24:53 3Dos

我有将您的修改后的代码添加到codepen https://codepen.io/anon/pen/EwMjrz，但它仍然无法正常工作。 – 109881

我会假设你没有真正测试过你的解决方案，因为你的选择器不正确，只有在** WebsitePrimaryNav **的'div'部分中点击，而不是在页面的其他地方。 – NewToJS

对不起，我编辑了我的文章，有一个错字。我在@ 109881提供的codepen上测试了它（在行中有子菜单之前添加点） – 3Dos

如何删除切换课程时点击外部菜单

回答

相关问题