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

Posted 2023-03-13

【中文标题】如何使用 AngularJS 和 CSS 滑动切换列表元素

【英文标题】：How to slide toggle list elements with AngularJS and CSS

【发布时间】：2016-07-26 23:24:43

【问题描述】：

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

提前致谢！

【问题讨论】：

那是用什么语言写的？因为那看起来不像 javascript...

JavaScript 结合 TypeScript @Neal

然后把它放在标签里......

@Neal 好了，我忘了.. 抱歉。

请不要将标签名称放在标题中...

【参考方案1】：

您可以使用纯 CSS + Angular 的帮助来提供 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 驱离父块，从而自动减小父块的大小。

【参考方案2】：

如果您为最大高度设置动画，您可以只使用 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，这样您就不必担心浏览器之间的微小像素差异——但是您将必须为每个浏览器设置不同的高度nav 选项，如果您希望它正确动画。

【讨论】：

我正在动态加载导航，因此导航选项没有标准的最大高度。项目是根据权限加载的。

如果你是动态创建导航，那么你可以根据元素的数量计算高度并设置它。