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

Posted 2023-03-06

【中文标题】在 li ng-click 上仅切换 1 个子菜单，不允许另一个 li 打开

【英文标题】：Toggle only 1 submenu on li ng-click and not allow another li to open

【发布时间】：2020-04-06 10:25:51

【问题描述】：

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

如何一次只切换 1 li 子菜单，并且不让另一个因为溢出而打开 单击该菜单/子菜单之外的任何位置（如果可能）关闭活动子菜单 我的 css3 ngAnimate 正在为没有子项的 li 元素设置动画，我如何检查它并仅在它有子项时为其提供切换类？

这是我的菜单的 html 代码，我正在使用 ng-repeat 重复 li，它是来自我的控制器的子菜单 -

<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 个子项，它会打开/关闭正常，但是当我单击第 2 个时，它也会打开导致垂直溢出（sidenav） 如果我点击没有子菜单的 li 也打开到 144px 高度：s 那么我该怎么做呢？最后还有如何编写 onclick（外部菜单功能）来切换（关闭）活动子菜单。

编辑-也添加控制器文件

控制器 -

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',
  ];
);

【问题讨论】：

感谢您的编辑。如果这个问题已经得到解答，任何人都可以将我链接到与帖子相关的主题。我真的很感激。

您能在fiddle 上分享您的工作示例吗？

【参考方案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;
  

【讨论】：

我用我的一些用例修改了你的代码。我需要在我的视图上显示活动的 li(main) 标题，所以我使用该 states.activeItem 来显示活动的 li 字符串。我做了什么 - 添加了 $scope.itemClicked = $scope.clicked = !$scope.clicked;在 func 内部并将 $scope.states.activeItem = item.title 交换为 ng-click 并使用您的 ng-if 我添加 && 运算符来检查它是否“itemClicked”，因此只有带有标题的 li 会显示它是否被单击或没有，也只有在有子项目时才下降。它与向下/向上滑动完美配合！感谢您的解释和帮助我的时间！

哎呀，我想我犯了一个错误。我没有子项的 li 正在短暂扩展，因为我没有检查 clicked/!clicked 是否在带有子项的 li 上我如何编写 ng-if 来检查所有 3 个是否为真？即有子项目，被点击并具有活动标题。我试过像 ng-if="toggleSubNav(item) && states.activeItem === item.title " 因为我的子项目检查和项目点击检查是在同一个函数中完成的，这段代码不会切换任何东西，但活动标题工作正常因为它是单独定义的。

对不起，它得到了修复，我在 ng-if 上添加了第三个条件，即 && item.subItems，它修复了打开没有子项目 li 的错误。对不起，打扰你。但再次感谢所有帮助