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

Question

下拉菜单使用 CSS 和 HTML/JS 设计，使用从 JS 添加的名为“is-open”的类。一旦出现在指定的 HTML div 中，它将激活 CSS 以显示子菜单。

但是有一个小问题，即一旦单击下拉菜单就不会消失，除非单击相同的菜单项。 （在 menu-content 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");
  });
});

这应该可以解决问题！