Angular UI Bootstrap 响应式菜单 - 单击关闭菜单时关闭菜单? [英] Angular UI Bootstrap Responsive menu - closing menu when clicking off it?

问题描述

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

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

我正在寻找此功能:

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

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

解决方案

这实际上很简单，只需添加一些额外的 CSS 和添加的 div.

Plunker 演示

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

CSS:

.backdrop {位置:固定；顶部:0；右:0；底部:0；左:0；背景色:透明；z-索引:-1；}

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

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

标记:

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

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

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

I've successfully created a responsive menu using Angular UI Bootstrap. The problem is:

When the responsive menu is open it can only be closed by re-clicking the toggle. Clicking anywhere else on the page keeps the menu open, which is undesirable for the site I'm building.

I'm looking for this functionality:

Clicking anywhere except the menu should close the menu, not toggle it.

How would one go about achieving this? I tried setting an ng-click on the html or body elements and seeing if that would work, but it didn't.

解决方案

This actually fairly simple to solve with a little extra CSS and an added div.

Plunker Demo

The mechanics of this solution are pretty straightforward: Add an extra div to the navbar markup that serves as a clickable backdrop when the menu is expanded.

CSS:

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

To make sure that the backdrop covers the entire viewport, you'll use position: fixed and set the top, right, bottom and left properties to 0. Then you'll need to make sure that the backdrop doesn't cover the menu, rendering your menu items un-clickable. To do this, you need to set its z-index to -1. Finally, to make sure it's 'clickable' you need to give it a background. Setting the background-color to transparent makes sure that it doesn't obscure any of the navbar elements.

The next thing you need to do is ensure that the backdrop element is only displayed when the menu is expanded, otherwise it would cover your body content and make it impossible to interact with any of the content. The cool thing is that the ngClass directive makes this simple. You can use the isCollapsed scope variable to determine when to add the backdrop class by setting the expression to isCollapsed === false. Lastly, add an ng-click attribute to close the menu. So, the markup looks like the following:

MARKUP:

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

When the backdrop class is not added, the div--which has no content--will naturally collapse to a height of 0, so there's actually no need to hide or show it.

Just remember that the backdrop div has to be added to the same element that is handled by your controller that manages the collapse state of the menu. If it can't access the isCollapsed scope variable, it won't display and the ng-click event will have no effect.

You can easily improve this by creating a simple custom directive, so that you don't have to add the div in your markup. Just set the scope property of the directive to true so that the directive has access to the parent isCollapsed variable.

这篇关于Angular UI Bootstrap 响应式菜单 - 单击关闭菜单时关闭菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！