Question

每当用户点击动态雪佛龙时，我都会创建一个简单的下拉菜单。我设法在单击时将旋转类附加到元素，但是当用户单击其他位置时我无法将其删除。我想我需要检测dom上的点击并采取相应的行动。我阅读了this博客，但在实施该代码方面遇到了麻烦。是否有更简单的方法将人字形旋转回来？

Fiddle

HTML：

<div ng-app="myApp" ng-controller="MainCtrl">
  <span class="dropdown dropDownSettings" ng-click="rotate = !rotate">
            <i class="fa fa-chevron-down draftDetails" id="editDropDown" data-toggle="dropdown" ng-class="{'rotate180' : rotate}"></i>
                <ul class="dropdown-menu" role="menu" aria-labelledby="editDropDown">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="">Edit</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="">Delete</a></li>
            </ul>
        </span>
</div>

JS：

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.rotate = false;
});

CSS：

.dropDownSettings {
  margin-left: 100px;
  margin-top: 100px;
  cursor: pointer;
}


/*rotate 180*/

.rotate180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.draftDetails {
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  transition: all .3s;
}

Answer 1

使用CSS可以更轻松地实现这一目标。只需在下拉列表中包含open类时应用转换。

.dropDownSettings.open .draftDetails  {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

http://jsfiddle.net/h9ga73fb/

Answer 2

onblur是在元素失去焦点时触发的事件，因此您可以使用它来确定用户何时点击其他地方＆＃39;。

您希望在单击元素时应用rotate类，并在单击其他位置时将其删除，这似乎很奇怪，当然它应该取决于下拉列表的展开/折叠状态？有一个用于自举插件的库：angular https://angular-ui.github.io/bootstrap/

AngularJS - 无法删除在单击时添加的已添加的css类

2 个答案: