Angular UI Bootstrap Responsive menu - closing men

问题:

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.

回答1:

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.