单击下拉菜单时显示覆盖层答案

【问题标题】：show overlayer on click on dropdown menu单击下拉菜单时显示覆盖层
【发布时间】：2016-12-06 12:16:14
【问题描述】：

我有一个下拉菜单，点击时需要触发覆盖层以将焦点放在下拉菜单上。我有 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');
});

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

有什么建议或建议吗？

【问题讨论】：

我想你可以尝试使用 .one() 而不是 .click()
一旦检查了这个解决方案，我认为它对你有帮助。 jsfiddle.net/ishimdar/y4fpgyg4/5
谢谢你，但效果不是很好，如果你点击第一个下拉菜单，然后点击第二个，你会看到覆盖不再显示

标签： javascript jquery css twitter-bootstrap drop-down-menu

【解决方案1】：

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

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

我现在正在测试，但它似乎有效，或者至少我希望

如果有人未来需要，这里是 codepen > https://codepen.io/mp1985/pen/kXjOAN

【讨论】：

【解决方案2】：

工作密码 -> 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');
});

也许有帮助……

【讨论】：

谢谢你，但效果不是很好。如果单击（打开下拉菜单）然后双击，您会发现它不起作用。在这里试试codepen.io/mp1985/pen/rLAXKE
用我上一条评论的内容修改了答案，如果你想考虑我的回答。谢谢你，哈格德。