0

在此示例中： https ://plnkr.co/edit/O9fbLcTV7QPvqB3FpiAA?p=preview

当您单击汉堡菜单图标并选择一个导航项目时，它会保持菜单打开，直到您再次单击汉堡图标。选择菜单项时有自动折叠的好方法吗？

我试过了：

<li><a href="#" ng-click="isNavCollapsed = !isNavCollapsed;">Link 1</a></li>

哪个有效，但在不处于移动模式（在更宽的屏幕上）时会触发导航菜单折叠动画。

4

2 回答 2

0

我通过添加一个标志“hamburger_open”解决了这个问题，该标志在扩展（）时触发真，在折叠（）时触发假。

<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed" expanding="hamburger_open=true" collapsing="hamburger_open=false">

...和检查 hamburger_open 是否为真的 hamburger_collapse 函数：

<li><a href="#" ng-click="hamburger_collapse()">Link 1</a></li>

  ...
  $scope.hamburger_collapse = function() {
    if($scope.hamburger_open) {
      $scope.isNavCollapsed = !$scope.isNavCollapsed;
    }
  }
  ...

https://plnkr.co/edit/IFIL8lgjK0oGDqZkLK5F?p=preview

考虑到每个现代移动菜单在选择菜单项时都会自动折叠，这似乎是一件奇怪的事情。

于 2019-05-10T15:47:16.650 回答
0

您可以使用纯 JS 添加事件侦听器，您可以在其中检查窗口的宽度是否与您的移动断点匹配。只需确保将实际更改包装到一个$apply函数中，否则 AngularJS 将不知道它：

https://plnkr.co/edit/ZzbXZ3lFxqX6Tlra46W5?p=preview

angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
  $scope.isNavCollapsed = true;
  $scope.isCollapsed = false;
  $scope.isCollapsedHorizontal = false;


  document.addEventListener('click', collapseMenu, false);

  function collapseMenu(event) {
    if(event.target.matches('.nav.navbar-nav li a')  && window.innerWidth < 768) {
      $scope.$apply(function() {
        $scope.isNavCollapsed = true;
      });
    }
  }

  // prevent memory leaks by removing listener when scope is destroyed
  $scope.$on("$destroy", function() {
    document.removeEventListener('click', collapseMenu, false);
  });

});

请注意，这将要求您在断点值方面保持 CSS 和 JS 同步

于 2019-05-10T15:14:09.143 回答