单击叠加层或其他元素时隐藏div

Question

我想知道如何做到这一点。我有一个搜索栏，当您单击导航栏中的“搜索”图标时，也会出现一个覆盖图。我试图关闭搜索栏，并在单击叠加层或不是实际搜索栏本身的另一个元素时淡出叠加层吗？与Bootstrap下拉菜单的工作原理类似-如果您单击下拉菜单以外的其他任何内容，则会将其关闭。

$( "#searchToggle, #mobileSearchToggle" ).click(function() {
  $('.search-bar').toggleClass( "open" );
  $(".overlay").fadeToggle(150);
  if ($(this).find('i').text() == 'search'){
    $(this).find('i').text('close');
  } else {
    $(this).find('i').text('search');
  }
});

这是我当前的代码，其中显示了叠加层，并且更改了材质图标。

任何帮助都会很棒！