如何在单击外部菜单时删除切换类

Question

下拉框使用CSS和超文本标记语言/JS设计，使用从JS添加的名为“is-open”的类。一旦出现在指定的超文本标记语言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

Answer 1

您可以在文档中添加一个事件监听器来关闭菜单

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

这应该能奏效！