Question

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

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

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

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

注意：当用户点击屏幕上的任何其他位置时，下拉菜单会关闭，而叠加层也会显示：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

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

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

1 个答案: