角UI响应引导菜单 - 点击关闭它，当关闭菜单？ [英] Angular UI Bootstrap Responsive menu - closing menu when clicking off it?

问题描述

我已经成功地创建了采用了棱角分明的UI引导一个负责任的菜单。问题是：

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.

我在寻找此功能：

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

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

一个人怎么会去实现这一目标？我试着设置了 NG-点击在 HTML 或体元素，看到，如果这样做的工作，但事实并非如此。

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.

推荐答案

这其实是相当简单的一点点额外的CSS和一个额外的div来解决。

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

该解决方案的机制是pretty简单：添加一个额外的div来充当菜单时膨胀的背景下，可点击导航栏标记

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;
}

要确保的背景覆盖整个视口，你会使用的位置是：固定并设置顶，右键，底和离开属性 0 。然后，你需要确保的背景不包括菜单，渲染你的菜单项未点击。要做到这一点，你需要将其的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.

您需要做的下一件事就是确保当菜单扩展的背景元素时，才会显示，否则会掩盖你的主体内容，并使其无法与任何内容进行互动。最酷的是，ngClass指令使得这个简单。您可以使用isCollapsed范围的变量，以确定由前pression设置为添加背景类isCollapsed ===虚假。最后，添加一个 NG-点击属性关闭菜单。于是，标记如下所示：

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>

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

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.

请记住，背景div有被添加到由控制器，管理菜单崩溃状态下处理相同的元素。如果它不能访问isCollapsed范围的变量，它不会显示和NG-click事件不会有任何效果。

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.

您可以轻松创建一个简单的自定义指令，让你不必添加在div在您的标记改善这一点。就在指令范围属性设置为true，使该指令访问父isCollapsed变量。

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.

这篇关于角UI响应引导菜单 - 点击关闭它，当关闭菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！