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

Question

下拉菜单是使用CSS和HTML/JS设计的，使用从JS添加的名为"is-open"的类。一旦出现在指定的HTMLdiv中，它将激活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");
  });
});

这应该可以解决问题！

Answer 2

我想

添加一个额外的答案，该答案更易于实现，并通过向文档添加单击来防止任何不需要的潜在阻止行为。

1. 将 tabindex="-1" 添加到div 中，当添加 is-open 类时，该div 会打开以显示菜单
2. 当应用 is-open 类以打开和显示菜单时，将 focus（） 应用于元素。这将允许您附加模糊事件侦听器
3. 创建 OnBlu 事件侦听器并简单地删除 Blur 上的 IS-Open 类，只要单击元素之外的任意位置，您的菜单就会关闭。

这可以防止 dom 拦截点击事件，为什么避免将 onclick 事件附加到文档或正文，如其他一些答案所建议的那样。 这里的这个答案解释了更多关于tabindex方面的信息，这就是我如何找到使用焦点和模糊事件的方法：https://stackoverflow.com/a/46115264/12212051

<div class="sel" id="monthSelectDiv" aria-label="select month" tabindex="-1">
    <select id="monthSelect" name="monthSelect">
        <option disabled>Select Month</option>
        <option value="01"> January </option>                            
        <option value="02"> February </option>
    </select>
</div>
<script>
// Toggling the `.active` state on the `.sel`.
$('.sel').click(function () {
    $(this).toggleClass('active');
    $(this).focus();
});
$('.sel').blur(function () {
    $(this).removeClass('active');
});
</script>