如何从 AngularJS 的子菜单中简单地切换/隐藏菜单

Question

所以我通读了几个堆栈，发现我必须创建单独的指令来隐藏/切换菜单的子菜单项。

我希望在单击任何子菜单项时隐藏菜单。

但我觉得必须有一个更简单的方法，我想知道是否有人知道是否有？

截至目前，我已将代码设置为列出创建选项卡并为其分配值的项目。选择子菜单项时，它会隐藏所有选项卡，但所选选项卡值除外。这样就不会重新加载页面，也不会传递任何参数。

<a href ng-click="toggle = !toggle">=</a>
<ul ng-show="toggle">
  <li><a id="Home" ng-click="navi.selectTab(1)">Home</a></li>
  <li><a id="About" ng-click="navi.selectTab(2)">About</a></li>
  <li><a id="Contact" ng-click="navi.selectTab(3)">Contact</a></li>
</ul>

...<div ng-show="navi.isSelected(1)">...
...<div ng-show="navi.isSelected(2)">...
...<div ng-show="navi.isSelected(3)">...

我希望快速修复。我用 plunkr 附加了一个函数原型： HERE

同样，这只是一个原型。最终版本将被幻想。我只是在寻找功能建议。

Answer 1

如果我理解正确，那么你可以这样做：

<a href ng-click="toggle = !toggle">=</a>
<ul ng-show="toggle">
  <li><a id="Home" ng-click="navi.selectTab(1); toggle = false">Home</a></li>
  <li><a id="About" ng-click="navi.selectTab(2); toggle = false">About</a></li>
  <li><a id="Contact" ng-click="navi.selectTab(3); toggle = false">Contact</a></li>
</ul>

或者创建一个可以同时执行的函数 - selectTab(index) 和 toggle = false 。并打电话给ng-click