I'm trying to build a clickable drop-down menu. I'm using my own build AngularJS directive to make the drop-down work as well as loading the menu items dynamically.
I've come a far way, but now I have just one little problem.. I can't find a CSS(3) only way to make an animation for the dropping down ul
's.
What I have:
The code for the dropdown function:
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;
}
}
}
}
Does anyone maybe know a replacement of jQuery's slideToggle
or a way to use jQuery's slideToggle
in my directive?
Thanks in advance!