Javascript 引导3-在导航栏下拉菜单后，单击背景变暗

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

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

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

到目前为止，我只实现了CSS-覆盖效果。现在我想用下拉状态操作绑定它

注意：当用户单击屏幕上的任何其他位置时，下拉列表关闭，覆盖显示：none too

<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>

---

引导程序提供您侦听的事件（例如，

show.bs.dropdown

）-请参阅此文档：

---

因此，请注意打开和关闭事件，并根据需要隐藏/显示覆盖图

谢谢，我确实记得检查过该页面，尽管实现不起作用。真有趣。谢谢你的帮助，顺便说一句，现在它工作了。我将编辑我的问题，以防将来有人需要它。

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