Question

我不确定解决这个问题的最好方法。

我正在使用ui.bootstrap并在我的导航栏中有几个下拉列表。我在这些导航栏下拉菜单上有一个很好的动画。他们基本上都喜欢这个：

<div id="settings_menu" dropdown data-ng-click="ddAnimate()">
    <span class="glyphicons glyphicons-settings dropdown-toggle cursor" data-toggle="dropdown"></span>
    <ul class="dropdown-menu" role="menu" data-ng-class="ddGetClass()">
        <li><a href="javascript:void(0);"><span class="glyphicons glyphicons-bell text-purple mr15"></span>Users</a></li>
        <li><a href="javascript:void(0);"><span class="glyphicons glyphicons-notes text-blue mr15"></span>Servers</a></li>
        <li><a href="javascript:void(0);"><span class="glyphicons glyphicons-facebook text-orange mr15"></span>Crons</a></li>
    </ul>
</div>

请注意父div上的 ddAnimate（）和子UL元素上的 ddGetClass（）。

这是控制器：

'use strict'

angular.module('tbads').controller('TopNavController', ['$scope',

    function($scope) {
        var flag = true;
        $scope.ddGetClass = function() {
            return flag ? "": "animated animated-shortest flipInX";
        }

        $scope.ddAnimate = function() {
            flag = !flag;
        }
    }

]);

好的，非常简单，只要您遵循特定的点击模式，这就行得很好。例如，请记住我在标题上有几个这样的标题，有自己的标识符等。

如果我点击其中一个，则动画将在类附加ng-class时发生。如果我再次单击它，它将关闭并删除该类。如果我再次点击它，它继续运行正常。问题是，如果我点击一个下拉列表，它会动画，如果我点击另一个下拉列表或空格而不是关闭第一个下拉列表，那么第一个类的类永远不会删除，所以如果我再回到它然后再次单击它，动画不存在。

我的基本问题是我需要了解如何在点击另一个下拉列表时删除所有其他下拉菜单上的动画类？我确定我做错了什么，或者有更好的方法。

无论如何，如果下拉列表未打开，我需要删除该类。

感谢您的建议。

Answer 1

一种解决方案是使用$ interval来检查下拉列表是否已打开（有一个＆＃39; open＆＃39;类）。如果它未打开，则删除动画类。

$interval(function()
{
   if(! jQuery("#settings_menu").hasClass("open")))
   {
      jQuery("ul.dropdown-menu").removeClass( "animated animated-shortest flipInX" )
   }
});

不要忘记向控制器注入$ interval。由于您使用多个下拉列表，因此每个周围的div和内部ul都需要唯一的ID。如果您使用ng-repeat来生成下拉列表，则可以使用$ index生成唯一ID。

AngularJS - 在多个元素上使用ng-click和ng-class时的奇怪行为

1 个答案: