0

在 angularjs 中显示/隐藏动态子菜单，我在 js 文件中添加和删除动态类。每次当 url 状态改变时（即 ui-sref={{mymenu.url}}）子菜单是不可见的。如果没有状态改变子菜单工作正常。任何人都可以请建议。

html

<li ng-repeat='mymenu in menuItems' ng-click="showHideMenu($event);" >
<a class="iconsize" ui-sref={{mymenu.url}}>
<i class={{mymenu.image}}></i> <strong>{{mymenu.menuName}}</strong>
<span class="fa fa-chevron-down"></span>
</a>
<ul class="submenuHide">
    <li class="" ng-repeat='submenu in mymenu.submenu'> 
        <a>{{submenu.submenuName}}</a>
    </li>
</ul>

JS

    $scope.showHideMenu = function(event) {
    var classname = event.target.parentElement.parentElement.children[1].className;
    if(classname == 'submenuHide'){
        $(event.target.parentElement.parentElement.children[1]).removeClass('submenuHide');
        $(event.target.parentElement.parentElement.children[1]).addClass('submenuShow');
    }else if(classname == 'submenuShow'){
        $(event.target.parentElement.parentElement.children[1]).removeClass('submenuShow');
        $(event.target.parentElement.parentElement.children[1]).addClass('submenuHide');
    }
}
4

1 回答 1

1

几件事。一，您需要确保您的菜单在您正在使用的各个模板之外。第二，使用绑定到 ng-model 的 ng-class 可确保您的菜单状态包含在摘要循环中。这将为您节省 jqLit​​e 和 dom 解析逻辑。

这是一个示例 plunker。

因此，您的代码可能如下所示：

<body ng-controller="MainCtrl">
    <a ui-sref="hello">Hello</a>
    <a ui-sref="about">About</a>
    <button ng-click="toggleMenu()">Show / Hide Menu</button>
    <ui-view></ui-view>
    <ul ng-class="{showMenu: show, hideMenu: !show}">
        <li ng-repeat="letter in ['a','b','c','d']">{{letter}}</li>
    </ul>
</body>

有了这个 JS：

app.controller('MainCtrl', function($scope) {
  $scope.show = false;
  $scope.toggleMenu = function() {
    $scope.show = !$scope.show;
  };
});
于 2016-11-10T14:02:23.700 回答