嵌套子菜单的 AngularJs 本机幻灯片切换无法正确更新高度

Posted 2023-03-06

【中文标题】嵌套子菜单的 AngularJs 本机幻灯片切换无法正确更新高度

【英文标题】：AngularJs native slide toggle for nested submenues doesn't update height correctly

【发布时间】：2019-01-01 11:25:53

【问题描述】：

我正在为 AngularJS 中的嵌套菜单实现滑动切换。我一直在使用以下页面中的代码：https://blog.assaf.co/native-slide-toggle-for-angularjs-1-4-x/

不过，我只有一个问题。我正在尝试在带有嵌套子菜单的 sidenav 菜单上实现这一点，这些子菜单由 <ul> 和 <li> 元素构建。在切换了具有子菜单的菜单项之后，我稍后切换了同一个菜单按钮的子菜单，该菜单按钮的 <ul> 元素没有滑入。高度保持不变。

另外，如果我保持子菜单关闭，只打开顶部菜单项，<ul> 元素的高度在我切换子菜单时保持不变，这意味着子菜单在我切换它打开之前不会显示（虽然仍然不可见），然后关闭顶部菜单按钮，然后再次打开它。

请在此处查看它的实际效果： https://codepen.io/marcus-edensky/pen/MBoWZJ

这是我的 javascript 代码：

app.controller('myCtrl', function($scope, $mdSidenav) 
);

app.animation('.slide-toggle', ['$animateCss', function($animateCss) 
    var lastId = 0;
    var _cache = ;

    function getId(el) 
        var id = el[0].getAttribute("data-slide-toggle");
        if (!id) 
            id = ++lastId;
            el[0].setAttribute("data-slide-toggle", id);
        
        return id;
    
    function getState(id) 
        var state = _cache[id];
        if (!state) 
            state = ;
            _cache[id] = state;
        
        return state;
    

    function generateRunner(closing, state, animator, element, doneFn) 
        return function() 
            state.animating = true;
            state.animator = animator;
            state.doneFn = doneFn;
            animator.start().finally(function() 
                if (closing && state.doneFn === doneFn) 
                    element[0].style.height = '';
                
                state.animating = false;
                state.animator = undefined;
                state.doneFn();
            );
        
    

    return 
        addClass: function(element, className, doneFn) 
            if (className == 'ng-hide') 
                var state = getState(getId(element));
                var height = (state.animating && state.height) ? 
                    state.height : element[0].offsetHeight;

                var animator = $animateCss(element, 
                    from: height: height + 'px',
                    to: height: '0px'
                );
                if (animator) 
                    if (state.animating) 
                        state.doneFn = 
                          generateRunner(true, 
                                         state, 
                                         animator, 
                                         element, 
                                         doneFn);
                        return state.animator.end();
                    
                    else 
                        state.height = height;
                        return generateRunner(true, 
                                              state, 
                                              animator, 
                                              element, 
                                              doneFn)();
                    
                
            
            doneFn();
        ,
        removeClass: function(element, className, doneFn) 
            if (className == 'ng-hide') 
                var state = getState(getId(element));
                var height = (state.animating && state.height) ?  
                    state.height : element[0].offsetHeight;

                var animator = $animateCss(element, 
                    from: height: '0px',
                    to: height: height + 'px'
                );

                if (animator) 
                    if (state.animating) 
                        state.doneFn = generateRunner(false, 
                                                      state, 
                                                      animator, 
                                                      element, 
                                                      doneFn);
                        return state.animator.end();
                    
                    else 
                        state.height = height;
                        return generateRunner(false, 
                                              state, 
                                              animator, 
                                              element, 
                                              doneFn)();
                    
                
            
            doneFn();
        
    ;
]);



(function() 
    var app = angular.module('app', ['ngAnimate']);

    app.animation('.slide-toggle', ['$animateCss', function($animateCss) 
        return 
            addClass: function(element, className, doneFn) 
                if (className == 'ng-hide') 
                    var animator = $animateCss(element,                     
                        to: height: '0px'
                    );
                    if (animator) 
                        return animator.start().finally(function() 
                            element[0].style.height = '';
                            doneFn();
                        );
                    
                
                doneFn();
            ,
            removeClass: function(element, className, doneFn) 
                if (className == 'ng-hide') 
                    var height = element[0].offsetHeight;
                    var animator = $animateCss(element, 
                        from: height: '0px',
                        to: height: height + 'px'
                    );
                    if (animator) 
                     return animator.start().finally(doneFn);
                    
                
                doneFn();
            
        ;
    ]);
)();

这是 html - 一个简单的：

<ul class="menu-toggle-list">
    <li><a md-ink-ripple ng-init="showMenu2 = true" ng-click="showMenu2 = !showMenu2" class="md-button menuSub">Tours</a>
        <ul ng-show="showMenu2" class="slide-toggle">
            <li><a md-ink-ripple ng-init="showMenu3 = true" ng-click="showMenu3 = !showMenu3" class="md-button menuSub">Group tours</a>
            <ul ng-show="showMenu3" class="slide-toggle">
                <li><a md-ink-ripple href="URL/TOURS/GROUP-TOURS/PLANNING/" class="md-button">Planning</a></li>
                <li><a md-ink-ripple href="URL/TOURS/GROUP-TOURS/TYPES/" class="md-button">Types</a></li>
            </ul>
            </li>
        </ul>
    </li>
    <li><a md-ink-ripple ng-init="showMenu6 = true" ng-click="showMenu6 = !showMenu6" class="md-button menuSub">Users</a>
        <ul ng-show="showMenu6" class="slide-toggle">
            <li><a md-ink-ripple href="URL/TOURS/GROUP-TOURS/" class="md-button">Staff</a></li>
            <li><a md-ink-ripple href="URL/TOURS/GROUP-TOURS/" class="md-button">Clients</a></li>
        </ul>
    </li>
</ul>

这是 CSS：

.slide-toggle 
  overflow: hidden;
  transition: all 0.25s; 

【参考方案1】：

动画结束后，父级仍然保持高度。你必须删除它。

在动画完成后添加element[0].style.height = 'auto'。在generateRunner函数中if之后的第36行

function generateRunner(closing, state, animator, element, doneFn) 
  return function () 
    state.animating = true;
    state.animator = animator;
    state.doneFn = doneFn;
    animator.start().finally(function () 
      if (closing && state.doneFn === doneFn) 
        element[0].style.height = '';
      
      element[0].style.height = 'auto'; // <----- HERE
      state.animating = false;
      state.animator = undefined;
      state.doneFn();
    );
  

希望这会有所帮助。祝你好运！