單擊外部菜單時如何刪除切換的類

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>