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

Question

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

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

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

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

注意:当用户点击屏幕上的其他任何地方时，下拉菜单将关闭，叠加层也应显示为无。

<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

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