javascript - How to slide toggle list elements with AngularJS and CSS -


i'm trying build clickable drop-down menu. i'm using own build angularjs directive make drop-down work loading menu items dynamically.

i've come far way, have 1 little problem.. can't find css(3) way make animation dropping down ul's.

what have:

enter image description here

the code dropdown function:

private createdirective(): {         return {             restirct: 'e',             scope: {                 dataset: '='             },             templateurl: 'app/templates/leftbar/index.html',             controller: function ($scope) {                 $scope.select = select;                  var selecteditem;                  function select(menuitem: 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 maybe know replacement of jquery's slidetoggle or way use jquery's slidetoggle in directive?

thanks in advance!

you can plain css + angular provide ng-class toggling.

css

.container {   width: 50px; // 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>  

basically hides ul behind parent li. setting negative margin driving ul away parent block reducing size of parent automatically.


Comments