AngularJS - как показать элемент на нечетное количество кликов в любом месте браузера?

0

У меня есть панель выпадающего списка с надписью "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>
  • 2
    Вы можете попробовать использовать ng-blur чтобы установить переменную области видимости для проверки для ng-show . ng-blur - это когда контейнер теряет фокус, что звучит именно так, как вам нужно / нужно: docs.angularjs.org/api/ng/directive/ngBlur .

1 ответ

0

Вы можете попробовать следующее:

$(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/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню