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

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

这应该可以解决问题！

Answer 2

我想添加一个更易于实现的附加答案，并通过将单击添加到文档来防止任何不需要的潜在阻止行为。

1. 将 tabindex="-1" 添加到打开的 div 以在添加 is-open 类时显示菜单
2. 当应用 is-open 类打开和显示菜单时，将 focus() 应用于元素。 这将允许您附加一个模糊事件侦听器
3. 创建 onblur 事件侦听器并简单地删除模糊上的 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>