Question

在普通网站上，您可以打开所需的所有子菜单/下拉列表，当您转到新页面时，它会加载并且一切都很好地重置，但在单页面应用程序中，因为只有页面的子部分更改了方法需要重置页面。

这是我菜单的基本HTML结构。除了dropdown-toggle 指令和data-group 属性之外，它很常见。

dropdown-toggle value是要切换可见性的元素的ID。

data-group值只是将下拉列表组合在一起。这用于防止同一组中的两个下拉列同时可见。如果可以看到“导航”组中的下拉列表，并且您尝试从同一组中打开另一个下拉列表，则会首先关闭当前可见的下拉列表。

<ul>
    <li>
        <a href="#/">Dashboard</a>
    </li>
    <li>
        <a dropdown-toggle="submenu-repairs">Repairs</a>
        <ul id="submenu-repairs" data-group="navigation">
            <li>
                <a href="#/repairs/take-in">Take In</a>
            </li>
            <li>
                <a href="#/repairs/search">Search</a>
            </li>
        </ul>
    </li>
    <li>
        <a dropdown-toggle="submenu-customers">Repairs</a>
        <ul id="submenu-customers" data-group="navigation">
            <li>
                <a href="#/customers/register">Register</a>
            </li>
            <li>
                <a href="#/customers/search">Search</a>
            </li>
        </ul>
    </li>
</ul>

问题

在单页应用程序中（特别是在移动设备上），您可能在子菜单中有子菜单占用大量屏幕，当用户点击其中一个链接时，浏览器不会重新加载整个新页面，因此默认情况下菜单仍然是开放的。

在屏幕空间很小的小型设备上，单击链接时似乎没有任何反应。

目标是在点击链接后关闭子菜单，以下是我一直在考虑的一些方法：

将事件侦听器附加到DOM中具有<a>属性不等于空字符串的每个href元素。该事件监听器将以某种方式检查是否有任何子菜单打开并关闭它们。
如果 Angular 每当路由/网址更改时都会调度一个事件，那么我可以为该事件创建一个侦听器，该侦听器可以某种方式检查任何打开的子菜单并关闭它们。

如果数字1是最佳方式，那么当新视图加载时你会做什么，我是否必须将事件监听器附加到其中的所有<a>元素？

第2号甚至可能吗？

Answer 1

您可以收听包含<ul />元素的<a />，因为后者的点击会一直传播到DOM。

click事件到达<ul />元素后，您可以切换隐藏/显示子菜单的active类。

Here's an example Plunker

编辑：代码示例：

切换控制器中的$scope.active_submenus布尔值

      $scope.active_submenus = false;

      $scope.toggle_nav = function()
      {
        console.log( 'toggling', $scope.active_submenus );
        $scope.active_submenus = !$scope.active_submenus;
      }

根据active

更新ng-class课程

<ul ng-click="toggle_nav()" ng-class="{ active: active_submenus }">

在单页应用程序中单击链接时重置下拉列表（尤其是菜单）

1 个答案: