完全ted菜单中的toggleClass

Question

我似乎无法使其发挥作用。当我点击菜单图标时，菜单就出来了 当我再次点击它时它会关闭。 但是当我点击菜单本身内的网址时如何切换？ 我尝试为每个li添加一个类，并在函数上添加了clas，我尝试了meny的东西。也许是因为我对李有角度？

<div class="icomMenu"></div>
<navbar class="">
<nav class="nav">
    <ul>
        <li><a ui-sref="index" ui-sref-active="active">Home</a></li>
        <li><a ui-sref="About" ui-sref-active="active">About</a></li>
        <li><a ui-sref="Contact" ui-sref-active="active">Contact</a></li>
        <li><a ui-sref="Nested" ui-sref-active="active">Nested</a></li>
    </ul>
</nav>
</navbar>

$(document).ready(function() {
    $(".icomMenu").click(function() {
        $("navbar").toggleClass("NavOut");
    });
});

谢谢。

Answer 1

由于我看到你正在使用角度，我建议不要使用jQuery而是使用组件/视图控制器来处理这个问题。您可以将ng-class="{'NavOut': vm.menuVisible}"添加到navbar HTML元素，然后在li元素上使用ui-sref，而不是ng-click="vm.onMenuItemClick("About")"，然后在控制器中注入{{1}创建方法$state，设置onMenuItemClick(link)并使用this.menuVisible = false转到另一条路线。

编辑： 模板： this.$state.go(link)

控制器：

<div class="icomMenu"></div>
<navbar ng-class="{'NavOut: vm.menuVisible}">
<nav class="nav">
    <ul>
        <li><a ng-click="vm.onMenuClick('Home')" ui-sref-active="active">Home</a></li>
    </ul>
</nav>
</navbar>

这样的事情，我希望你能得到这个想法。导航栏似乎是创建组件的理想候选者，然后使用它的控制器来处理上面的逻辑。