Я реализую переключатель слайдов для вложенного меню в AngularJS. Я использовал код со следующей страницы: https://blog.assaf.co/native-slide-toggle-for-angularjs-1-4-x/
Хотя у меня с ним только одна проблема. Я пытаюсь реализовать это в боковом меню с вложенными подменю, построенными с элементами <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;
}