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

以下是代码的代码示例：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");
  });
});

这应该可以解决问题！

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

1 个答案: