Angular UI Bootstrap 响应式菜单 - 单击时关闭菜单？

Question

我已经使用 Angular UI Bootstrap 成功创建了一个响应式菜单。问题是：

当响应式菜单打开时，它只能通过重新单击切换来关闭。单击页面上的任何其他位置都会使菜单保持打开状态，这对于我正在构建的站点来说是不可取的。

我正在寻找这个功能：

点击菜单以外的任何地方都应该关闭菜单，而不是切换它。

如何实现这一目标？我尝试在 html 或 body 元素上设置 ng-click 并查看是否可行，但没有。

Answer 1

这实际上很容易解决，只需一点额外的 CSS 和添加的 div。

Plunker Demo

此解决方案的机制非常简单：向导航栏标记添加一个额外的 div，在菜单展开时用作可点击的背景。

CSS：

.backdrop {
  position: fixed;
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  background-color: transparent; 
  z-index: -1;
}

为确保背景覆盖整个视口，您将使用position: fixed 并将top、right、bottom 和left 属性设置为0。然后，您需要确保背景不会覆盖菜单，从而使您的菜单项不可点击。为此，您需要将其z-index 设置为-1。最后，为了确保它是“可点击的”，你需要给它一个背景。将background-color 设置为transparent 可确保它不会遮挡任何导航栏元素。

接下来您需要做的是确保背景元素仅在菜单展开时显示，否则它会覆盖您的正文内容并使其无法与任何内容进行交互。很酷的是 ngClass 指令使这变得简单。您可以使用 isCollapsed 范围变量通过将表达式设置为 isCollapsed === false 来确定何时添加背景类。最后，添加ng-click 属性以关闭菜单。因此，标记如下所示：

标记：

<div ng-class="{backdrop: isCollapsed === false}" ng-click="isCollapsed = !isCollapsed"></div>

在不添加背景类的情况下，没有内容的div自然会塌陷到0的高度，所以实际上不需要隐藏或显示它。

请记住，必须将背景 div 添加到由管理菜单折叠状态的控制器处理的相同元素中。如果无法访问 isCollapsed 作用域变量，则不会显示，ng-click 事件也不起作用。

您可以通过创建一个简单的自定义指令轻松改进这一点，这样您就不必在标记中添加 div。只需将指令的 scope 属性设置为 true，这样指令就可以访问父 isCollapsed 变量。