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>有类突出显示... 当类高亮显示在list元素之一时，我需要将class active添加到parentElement。

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

更新

ng-class =“{'active'：hasHighlight}”将无法使用我的代码，它将永久添加激活，因为重点始终出现在ng-class中：

            <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添加到列表元素时，请将$scope.hasHighlight更改为等于true。取消后，将其更改为false。

Answer 2

我找到了类似的东西：

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

和控制器：

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

单击时将类添加到父元素

2 个答案: