单击将类添加到父元素

Question

我有以下代码：

<li class="parentElement">
 <ul>
   <li class="highlight"><a href="">Item 1</a></li>
   <li><a href="">Item 2</a></li>
   <li><a href="">Item 3</a></li>
 </ul>
</li>

此处的<ul>是导航菜单中的下拉菜单。 活动元素/ <li>具有类突出显示...当类突出显示在列表元素之一中时，我需要将活动类添加到parentElement。

我试图使用ng-class，但是没有成功。

UPDATE

ng-class =“ {'active'：hasHighlight}”不适用于我的代码，因为ng-class中始终高亮显示，所以它将永久添加activ：

            <li class="parentElement">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"></a>
                <ul class="dropdown-menu">
                    <li ng-class="{ highlight: isActive('/item1')}"><a href="${createLink(uri: '/#/item1')}"></a></li>
                    <li ng-class="{ highlight: isActive('/item2')}"><a href="${createLink(uri: '/#/item2')}"></a></li>
                    <li ng-class="{ highlight: isActive('/item3')}"><a href="${createLink(uri: '/#/item3')}"></a></li>
                </ul>
            </li>

Answer 1

您使用ng-class是正确的。

<li class="parentElement" ng-class="{'active': hasHighlight}">
 <ul>
   <li class="highlight"><a href="">Item 1</a></li>
   <li><a href="">Item 2</a></li>
   <li><a href="">Item 3</a></li>
 </ul>
</li>

在控制器中，每当您将类highlight添加到list元素时， $scope.hasHighlight更改$scope.hasHighlight true 。 取下后，将其更改为false 。

Answer 2

我发现了这样的事情：

ng-class="{ active: isAnyActive() }"

和控制器：

$scope.isAnyActive = function() {
        return ['/item1','/item2','item3'].indexOf($location.path()) > -1;
    };