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

Posted 2023-05-08

【中文标题】单击下拉菜单时显示覆盖层

【英文标题】：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

谢谢你，但效果不是很好，如果你点击第一个下拉菜单，然后点击第二个，你会看到覆盖不再显示

【参考方案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

用我上一条评论的内容修改了答案，如果你想考虑我的回答。谢谢你，哈格德。