javascript - 仅在 li ng-click 上切换 1 个子菜单，不允许打开另一个 li

Question

在阅读文档和示例并使用基本的 ngAnimate - css3 转换实现它后，我有一个工作菜单，但我真的不知道如何去做，所以请耐心等待。

1. 如何一次只切换 1 个 li 子菜单并且不让另一个打开，因为它溢出了
2. 在该菜单/子菜单之外单击(如果可能，在任何地方)关闭事件子菜单
3. 我的 css3 ngAnimate 正在为没有子项的 li 元素设置动画，我该如何检查它并仅在它有子项时才给它切换类？

这是我的菜单 html 代码 & 我正在使用 ng-repeat 重复 li & 它是我 Controller 的子菜单 -

<ul class="navigation">
  <div class="" layout="column">
    <li md-ink-ripple="#ebeef4"
        ng-repeat="item in items"
        class="item {{item.id}}"
        ng-click="states.activeItem=item.title;
                  itemClicked = !itemClicked">
      <span>
        <i class="material-icons md-24 center-icons">{{item.icon}}</i>
      </span>
      <a class="title" ng-href="#!{{item.route}}">{{item.title}}</a>
      <span>
        <i class="material-icons md-18 subicon-openstate" id="test-icons">{{item.subicon}}</i>
      </span>
      <ul class="submenu" id="submenu-item-hover" ng-if="itemClicked">
        <li ng-repeat="subItem in item.subItems" class="subItem">
          <a href="#!{{subItem.subroute}}">{{subItem.title}}</a>
        </li>
      </ul>
    </li>
  </div>
</ul>

你可以看到我在子菜单上使用 ng-if，即第二个 ul 来检查它是否被点击，当它返回 true 时它使用这个 css 代码 -

#submenu-item-hover.ng-enter {
  transition: all ease-in 0.3s;
  height: 0px;
  opacity: 0;
}

#submenu-item-hover.ng-enter.ng-enter-active {
  height: 144px;
  opacity: 1;
}

#submenu-item-hover.ng-leave {
  height: 144px;
  opacity: 1;
}

#submenu-item-hover.ng-leave.ng-leave-active {
  transition: all ease-in 0.3s;
  height: 0px;
  opacity: 0;
}

但问题是，如果我只单击带有子项的 li 中的 1 个，它可以正常打开/关闭，但是当我单击第二个时，它也会打开，导致垂直溢出(sidenav)如果我点击没有子菜单的 li 也打开到 144px 高度:s那我该怎么做呢？最后还有如何编写 onclick(外部菜单函数)来切换(关闭)事件子菜单。

编辑- 也添加 Controller 文件

Controller -

app.controller('NavigationController', function($scope) {
  $scope.states = {};
  $scope.states.activeItem = '';
  $scope.items = [{
    id: 'item1',
    title: 'Dashboard',
    icon: 'dashboard',
    subicon: 'arrow_drop_down',
    route: 'dashboard',
    subItems: [{
        title: 'Page Visitors',
        subroute: 'page-visitors',
      },
      {
        title: 'Post Performace',
        subroute: 'post-performance',
      },
      {
        title: 'Team Overall',
        // subroute: '/team-overall',
      }
    ]
  }, {
    id: 'item2',
    title: 'Calendar',
    icon: 'calendar_today',
  }, {
    id: 'item3',
    title: 'Inbox',
    icon: 'inbox',
    subicon: 'unfold_more',
    subItems: [{
        title: 'New Mail',
        // subroute: '/new-mail',

      },
      {
        title: 'Scoial',
        // subroute: '/new-social',
      },
      {
        title: 'Updates',
        // subroute: '/new-updates',
      }
    ]
  }, {
    id: 'item4',
    title: 'Invoicing',
    icon: 'insert_drive_file',
  }, {
    id: 'item5',
    title: 'Lab / Experimental',
    icon: 'build',
  }];
});

Answer 1

您正在所有 <li> 共享 itemClicked 变量这导致它们全部打开。我建议利用您已经设置的 activeItem 变量。例如:

<ul class="navigation">
  <div class="" layout="column">
    <li md-ink-ripple="#ebeef4"
        ng-repeat="item in items"
        class="item {{item.id}}"
        ng-click="states.activeItem=item.title">
      <span>
        <i class="material-icons md-24 center-icons">{{item.icon}}</i>
      </span>
      <a class="title" ng-href="#!{{item.route}}">{{item.title}}</a>
      <span>
        <i class="material-icons md-18 subicon-openstate" id="test-icons">{{item.subicon}}</i>
      </span>
      <ul class="submenu" id="submenu-item-hover" ng-if="states.activeItem === item.title">
        <li ng-repeat="subItem in item.subItems" class="subItem">
          <a href="#!{{subItem.subroute}}">{{subItem.title}}</a>
        </li>
      </ul>
    </li>
  </div>
</ul>

此外，我会为您设置一个 ng-click 函数，这样您就可以根据是否有子项来决定是否要注册点击。例如

<li md-ink-ripple="#ebeef4"
        ng-repeat="item in items"
        class="item {{item.id}}"
        ng-click="toggleSubNav(item)">

$scope.toggleSubNav(item) {
  if (item.subItems) {
    $scope.states.activeItem = item.title;
  }
}