引导程序3-导航栏下拉菜单后，单击使背景变暗

当引导导航栏菜单项处于下拉状态时，我想实现背景覆盖，使背景变暗。

你可能已经在亚马逊的新主题上看到了这种影响。当用户单击"部门"菜单项并显示下拉菜单项时，背景将变暗。

我确实搜索了网络和stackoverflow，但没有找到任何解决方案。也许你有一个解决方案。

到目前为止，我只实现了CSS的叠加效果。现在我想将它与下拉状态操作绑定。

注意：当用户单击屏幕上的任何其他位置时，下拉列表就会关闭，覆盖应该会显示：也没有。

<style>
#overlay{
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    background-color:rgba(0,0,0,0.7);
    /* -webkit-filter: blur(10px) grayscale(50%); */
}
</style>

在@sooks的帮助下，我能够确定引导菜单的打开和关闭状态。这是它的样子。

$('.dropdown').on('show.bs.dropdown', function () {
  alert('Hi');
})
$('.dropdown').on('hide.bs.dropdown', function () {
  alert('Bye');
})