javascript - 如何使用 AngularJS 和 CSS 滑动切换列表元素

Question

我正在尝试构建一个可点击的下拉菜单。我正在使用我自己的构建 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 的方法？

提前致谢!

Answer 1

您可以使用纯 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 的大小。