javascript - 单击下拉菜单显示叠加层

Question

我有一个下拉菜单，点击它需要触发一个覆盖层以将焦点放在下拉菜单上。我有 2 个下拉菜单，因此我不能使用普通的 toggleClass()，所以我找到了一个解决方案，我做了一个 if 条件来查找覆盖是否已经显示

一切正常，但我有一个问题，如果用户双击 li.dropdown，这个解决方案就不再有效了:(

如果用户双击 li.dropdown，我如何隐藏叠加层？

这是我的代码笔> https://codepen.io/mp1985/pen/KrBOdB

$('li.dropdown').click(function() {
    if (!$('.full-overlayer').hasClass('show')){
        $(".full-overlayer").toggleClass("show");
    }
});


$('.full-overlayer, .dropdown-menu a').click(function() {
    $('.full-overlayer').removeClass('show');
});

我不确定这是否是完成此任务的最佳解决方案。

有什么建议或建议吗？

Answer 1

也许我找到了一个可行的解决方案。我添加了另一个 if 条件来检查它是否具有“打开”类

  if ($(this).hasClass('open')) {
    $(".full-overlayer").removeClass("show");
  }

我现在正在测试，但它似乎可行，或者至少我希望如此

这里是代码笔，如果有人需要 future > https://codepen.io/mp1985/pen/kXjOAN