Angular UI Bootstrap响应式菜单 - 点击关闭菜单时关闭菜单?
我已经使用Angular UI Bootstrap成功创建了一个响应菜单。问题是:Angular UI Bootstrap响应式菜单 - 点击关闭菜单时关闭菜单?
当响应菜单打开时,只能通过重新点击切换键来关闭它。点击页面上的任何其他位置,都会打开菜单,这对于我正在构建的网站来说是不理想的。
我在寻找这个功能:
任何地方点击,除了菜单应关闭菜单,而不是将其切换。
如何实现这一目标?我尝试在html
或body
元素上设置ng-click
,并查看这是否可行,但事实并非如此。
这实际上很简单,只需要一点额外的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变量。
谢谢!这很有魅力。 – Sharklazer
如果您在菜单上添加焦点丢失事件,该怎么办? ngBlur https://docs.angularjs.org/api/ng/directive/ngBlur –