Question

我一直在尝试通过AngularJS添加类，并且代码似乎不起作用，奇怪的是addClass正在处理父菜单项但不适用于Sub项。

我有一个嵌套的UL和LI，当我点击Parent LI ParentLi函数被调用时，它会添加一个＆＃34; focus＆＃34;类似于Clicked LI，这个工作正常，但是当我点击Nested LI时，我调用了childLi，我做了与Parent相同的操作，但是类没有被添加。我是Angular的新手，我希望我能以正确的方式做到这一点。

$scope.parentLi = function(event) {
    var liElement = angular.element(event.target.parentNode);
    var allParentLiElements = document.getElementsByClassName('parent-dropdown');
    if (!liElement.hasClass('focused')) {
        angular.element(allParentLiElements).removeClass('focused');
        liElement.addClass('focused');
    } else
        liElement.removeClass('focused');
};

$scope.childLi = function(event){
    var liElement = angular.element(event.target.parentNode);
    var allParentLiElements = document.getElementsByClassName('child-dropdown');
    if(!liElement.hasClass('focused')){
        angular.element(allParentLiElements).removeClass('focused');
        $(event.target).closest('.parent-dropdown').addClass('focused');
        liElement.addClass('focused');
    } else
        liElement.removeClass('focused');
}

请注意，我根据Jiam30给出的答案编辑了我的jsfiddle代码。

添加焦点类应该像活动类一样工作，即我刚刚点击的菜单应该具有焦点类别其他不应该，如果我将鼠标悬停在菜单项上并单击子项目，则子项和子项应该集中类。

Fiddle

Answer 1

应避免操纵控制器中的元素。

使用ng-class（也使用ng-repeat来避免重复HTML）。例如：

<li class="dropdown parent-dropdown" ng-click="parentLi()" ng-class="{'focused': isDropdownFocused}"></li>

在控制器中使用此功能：

$scope.parentLi = function() { 
    $scope.isDropdownFocused = !$scope.isDropdownFocused;
};

更新小提琴：http://jsfiddle.net/6be56/127/

AngularJS addClass不起作用

1 个答案: