我正在尝试构建一个可点击的下拉菜单。我正在使用我自己的构建 AngularJS 指令来使下拉菜单正常工作并动态加载菜单项。
我已经走了很远,但现在我只有一个小问题..我找不到一个 CSS(3) 唯一的方法来制作下拉动画 ul
'
我有什么:
下拉功能的代码:
private CreateDirective(): any {
return {
restirct: 'E',
scope: {
dataset: '='
},
templateUrl: 'App/Templates/LeftBar/index.html',
controller: function ($scope) {
$scope.Select = Select;
var SelectedItem;
function Select(MenuItem: any): any {
if (SelectedItem != null) {
SelectedItem.selected = false;
}
if (MenuItem.open) {
MenuItem.selected = true;
MenuItem.open = false;
return;
}
if (MenuItem.childs && MenuItem.childs.length > 0) {
MenuItem.open = true;
}
MenuItem.selected = true;
SelectedItem = MenuItem;
}
}
}
}
有没有人知道 jQuery 的 slideToggle
的替代品或在我的指令中使用 jQuery 的 slideToggle
的方法?
提前致谢!
最佳答案
您可以使用纯 CSS + Angular 帮助来实现此目的,以提供 ng 类切换。
CSS
.container {
width: 50px; // your widget width
overflow: hidden;
}
.content {
margin-top: 0;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease;
}
.container.collapsed .content {
margin-top: -100%;
}
HTML
<ul>
<li class="container" ng-class="{'collapsed':!item.open}">
<ul class="content">
<li>...</li>
...
</ul>
</li>
...
</ul>
基本上这将 UL 隐藏在父 LI 后面。通过设置负边距,您将 UL 驱离父 block ,从而自动减小父 block 的大小。
关于javascript - 如何使用 AngularJS 和 CSS 滑动切换列表元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36453152/