我已经使用Angular UI Bootstrap成功创建了一个响应菜单。问题是：Angular UI Bootstrap响应式菜单 - 点击关闭菜单时关闭菜单？

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

我在寻找这个功能：

任何地方点击，除了菜单应关闭菜单，而不是将其切换。

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

来源

2015-05-14 Sharklazer

如果您在菜单上添加焦点丢失事件，该怎么办？ ngBlur https://docs.angularjs.org/api/ng/directive/ngBlur –

这实际上很简单，只需要一点额外的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属性关闭菜单。因此，标记如下所示：

MARKUP：

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

当不添加背景类，股利 - 这没有内容 - 自然会崩溃到的高度为0 ，所以实际上不需要隐藏或显示它。

请记住，背景div必须添加到管理菜单崩溃状态的控制器处理的相同元素。如果它不能访问isCollapsed范围变量，它将不会显示，并且ng-click事件将不起作用。

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

来源

2015-05-17 17:31:37 jme11

谢谢！这很有魅力。 – Sharklazer

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

回答

Plunker Demo

相关问题