单击下拉菜单显示覆盖层

I have a dropdown menu that on click needs to trigger an overlayer to bring the focus on the dropdown menu. I have 2 dropdown menus, for this reason i can't use a normal toggleClass(), so I found a solution and I do an if condition to find if the overlay is already showed

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

everything works fine, but I have a problem, if the user double click on the li.dropdown, this solution doesn't work anymore :(

一切正常,但我有一个问题,如果用户双击li.dropdown,此解决方案不再工作:(

how can I hide the overlayer if the user double click on the li.dropdown?

如果用户双击li.dropdown,我该如何隐藏覆盖层?

this is my codepen > https://codepen.io/mp1985/pen/KrBOdB

这是我的codepen> 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');
});

I am not sure if this was the best solution to approach to this task.

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

any suggestion or advice?

有什么建议或意见吗?

2 个解决方案

#1

maybe I found a solution that works. I added another if condition to check if this has class "open"

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

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

I am testing now, but it seems work, or at least I hope

我现在正在测试,但似乎工作,或者至少我希望

here the codepen if somebody need for the future > https://codepen.io/mp1985/pen/kXjOAN

在这里,如果有人需要未来的代码簿> https://codepen.io/mp1985/pen/kXjOAN

#2

WORKING CODEPEN -> https://codepen.io/anon/pen/grdgva]

工作CODEPEN - > https://codepen.io/anon/pen/grdgva]

$('li.dropdown').on('click',function() {
    if (!$(this).hasClass('open'))
    {
        $(".full-overlayer").addClass("show");
    } else
    {
        $(".full-overlayer").removeClass("show");
    }
});


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

Maybe it helps...

也许它有帮助......

#1