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);
  }

});

单击时隐藏/显示覆盖

0 个答案: