Question

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

一切正常，但我有一个问题，如果用户双击li.dropdown，此解决方案不再有效：（

如果用户双击li.dropdown，我怎么能隐藏覆盖层？

这是我的codepen＆gt; 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

工作CODEPEN - ＆gt; 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');
});

也许有帮助...

Answer 2

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

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

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

如果有人需要未来＆gt;这里的codepen https://codepen.io/mp1985/pen/kXjOAN

在点击下拉菜单上显示叠加层

2 个答案: