Question

我有一个菜单，在同一页面的几个不同的地方使用，但它没有重复。通过切换课程触发菜单＆＃34;打开＆＃34;点击按钮。我目前的解决方案切换两个菜单，但我需要切换最近的菜单。在jQuery中，我会使用$（this）.closest（＆＃34; .wrapper＆＃34;）。toggle（＆＃34; open＆＃34;）;我有效地寻找那个等价物。

我还需要在点击菜单外面时关闭菜单。所以在jQuery中有类似的东西：$（＆＃34; html＆＃34;）。click（function（）{$（＆＃34; .wrapper＆＃34;）。removeClass（＆＃34; open＆＃34;） ;}）;

HTML：

<div class="wrapper" ng-app="fooApp" ng-controller="fooController">
  <p>foobar</p>
  <div class="wrapper" ng-class="{'open': isActive}">
    <button class="toggle" ng-click="activeButton();">Toggle 1</button>
    <ul class="list">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <p>foobar</p>
  <div class="wrapper" ng-class="{'open': isActive}">
    <button class="toggle" ng-click="activeButton();">Toggle 2</button>
    <ul class="list">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <p>foobar</p>
</div>

CSS：

.list {
  display: none;
}

.wrapper.open .list {
  display: block;
}

JS：

var app = angular.module('fooApp', [])
  .controller("fooController", function($scope) {
    $scope.isActive = false;
    $scope.activeButton = function() {
      $scope.isActive = !$scope.isActive;
    }
  });

Answer 1

您可以简单地使用两个变量：section1Active，section2Active。这样你就可以有两个不同的ng-class。

然后你可以编写两个函数（activeButton1（），activeButton2（））来切换这些新变量或将参数传递给activeButton函数。希望有所帮助！

$scope.activeButton1 = function() {
  $scope.isActive1 = !$scope.isActive1;
}

$scope.activeButton2 = function() {
  $scope.isActive2 = !$scope.isActive2;
}

这应该适合你的情况，但它不是最优雅的。

如何在Angular 1中仅为一个重复使用（但不重复）的元素切换类？

1 个答案: