Question

我正在尝试构建一个可点击的下拉菜单。我正在使用我自己的构建AngularJS指令来进行下拉工作以及动态加载菜单项。

我走得很远，但现在我只有一个小问题..我找不到一个CSS（3）唯一的方法来制作动画以降低ul。< / p>

我有什么：

下拉功能的代码：

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 +帮助从角度来提供ng-class切换。

<强> 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远离父块，从而自动减小父级的大小。

Answer 2

如果为max-height设置动画，则可以使用CSS为其设置动画：

var button = document.getElementById('nav');
button.onclick = function(e) {
  var target = e.target;
  if (e.target.tagName !== 'SPAN') return;
  target = target.nextSibling.nextSibling;
  if (target.className === 'open') {
    target.className = '';
  } else {
    target.className = 'open';
  }
};

ul {
  display: block;
   transition:all 0.5s ease;
}

ul ul {
  max-height: 0;
  overflow: hidden;
}

ul#nav1.open {
  max-height: 50px;
}
ul#nav2.open {
  max-height: 100px;
}
ul#nav3.open {
  max-height: 150px;
}

ul span {
  cursor: pointer;
}

<ul id="nav">
  <li>
    <span>Title 1</span>
    <ul id="nav1">
      <li>one</li>
      <li>two</li>
    </ul>
  </li>
  <li>
    <span>Title 2</span>
    <ul id="nav2">
      <li>three</li>
      <li>four</li>
      <li>five</li>
      <li>six</li>
    </ul>
  </li>
  <li>
    <span>Title 3</span>
    <ul id="nav3">
      <li>seven</li>
      <li>eight</li>
      <li>nine</li>
      <li>ten</li>
      <li>eleven</li>
      <li>twelve</li>
    </ul>
  </li>
</ul>

请注意，我使用max-height代替height，因此您不必担心浏览器之间的小像素差异 - 但必须设置每个导航选项的不同高度，如果您希望它正确地设置动画。

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

2 个答案: