Bootstrap 3 - 在导航栏下拉后单击变暗背景

Question

我想实现背景叠加，当 Bootstrap Navbar 菜单项处于下拉状态时使背景变暗。

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

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

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

注意：当用户点击屏幕上的任何其他位置时，下拉菜单会关闭，并且叠加层也应该转到 display:none。

<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 的帮助下，我能够确定 Bootstrap 菜单的打开和关闭状态。这是它的外观。

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

Answer 1

Bootstrap 提供您侦听的事件（例如。show.bs.dropdown） - 请参阅此文档：

http://getbootstrap.com/javascript/#dropdowns

所以监听打开和关闭事件，并根据需要隐藏/显示叠加层