Bootstrap 3 - 在Navbar下拉菜单后点击变暗背景

Question

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

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

我没有搜索网络和计算器，但没有找到任何解决方案。也许你有一个解决方案。

到目前为止，我已经实现了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的帮助下，我可以确定Bootstrap菜单的打开和关闭状态。这是它的外观。

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

Answer 1

引导提供你听（如show.bs.dropdown）事件 - 看到这个文档：

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

所以监听打开和关闭事件，并隐藏/显示覆盖的要求