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

Question

下拉菜单使用 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

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

这应该可以解决问题!