[英]Toggle only 1 submenu on li ng-click and not allow another li to open
在阅读文档和示例并使用基本的 ngAnimate - css3 过渡实现它后,我有一个工作菜单,但我真的不知道如何去做,所以请耐心等待。
这是我的菜单 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 个,它打开/关闭的效果很好,但是当我点击第二个也打开导致垂直溢出(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', }]; });
您正在所有<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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.