У меня есть панель выпадающего списка с надписью "navigation-dropdown", которая в настоящее время отображается, когда эта переменная называется "выпадающим списком" является истиной (выпадающее значение перевернуто при нажатии кнопки навигации). Таким образом, единственный способ закрыть раскрывающееся меню - снова нажать на навигационную панель. Есть ли способ закрыть раскрывающийся список, щелкнув в любом месте тела?
Пример кода:
<nav class="navigation-nav hide-mobile" ng-controller="LeftNavCtrl" ng-click="dropdown=!dropdown">
<h2>Dropdown</h2>
<ul class="navigation-dropdown" ng-show="dropdown" ng-click="dropdown=!dropdown">
<li class="navigation-dropdown__item">
<a>Account</a>
</li>
<li class="navigation-dropdown__item">
<a>Help</a>
</li>
</ul>
</nav>
Вы можете попробовать следующее:
$(document).on("click", function(e) {
if (!$(e.target).closest(".navigation-nav").length) {
$scope.dropdown = false;
}
$scope.$apply()
})
Он устанавливает значение выпадающего списка в значение false
если в любом месте document
.navigation-nav
который не является .navigation-nav
или дочерним .navigation-nav
.
Вот рабочая скрипка: https://jsfiddle.net/x89dbbw1/7/
ng-blur
чтобы установить переменную области видимости для проверки дляng-show
.ng-blur
- это когда контейнер теряет фокус, что звучит именно так, как вам нужно / нужно: docs.angularjs.org/api/ng/directive/ngBlur .