javascript - 单击时隐藏/显示叠加层

Question

我目前在我的页面上有一个叠加层，当我单击某些导航元素（例如搜索/下拉菜单）时会淡入。

我的问题是，如果我单击下拉菜单，然后单击“搜索”菜单项，它会淡出覆盖层并通过显示覆盖层和没有搜索栏来中断。

如果叠加层已经打开，则无需将其淡入，只需单击其他内容时将其淡出即可。

我添加了一个变量来检查它是否已经打开，但显然这对于​​“FadeToggle”会很麻烦。我已经尝试了很多组合，但似乎无法达到上述要求。

var overlay = false;

$('#myDropdown').on('show.bs.dropdown', function () {
  if(overlay == false) {
    $(".overlay").fadeIn(150);
    overlay = true;
  }
})

$('#myDropdown').on('hide.bs.dropdown', function () {
  if(overlay == true) {
    $(".overlay").fadeOut(150);
    overlay = false;
  }
})

$( "#searchToggle, #mobileSearchToggle" ).click(function() {
  $('.search-bar').toggleClass( "open" );
  $('body').toggleClass("noScroll");
  $('.dropdown-menu').removeClass('show');

  if(overlay == false) {
    $(".overlay").fadeToggle(150);
  }

});

标签： javascriptjquerybootstrap-modal