所以
我正在尝试使用jquery中转构建一些导航
打开/滑下导航运行良好。它将子进程ul设置为显示块,然后运行动画/转换。
关闭导航项时会发生此问题。ul立即被隐藏在回调中。我还添加了一个控制台日志‘动画结束’,一旦过渡结束,这是在正确的时间触发,所以不确定为什么ul被立即隐藏。
jquery/js看起来如下所示:
var dropDown = (function(){
var mainNav = $('#mainNav');
var navA = mainNav.find('li a');
var navUL = mainNav.find('ul');
var iconAll = mainNav.find('i');
navUL.transition({
'max-height': '0px',
'height': '0px',
'overflow': 'hidden',
'display': 'none'
});
navA.on('click',function(){
var nextUL = $(this).next();
var icon = $(this).find('i');
var nextULHidden = nextUL.css('display') === 'none';
if(nextULHidden) {
nextUL.css('display','block').transition({
duration: 1000,
'height': 'auto',
'max-height': '1000px',
easing: 'ease-in'
});
$(this).addClass('active');
icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
console.log('hidden');
}else if(!nextULHidden){
nextUL.transition({
duration: 1000,
'height': '0px',
'max-height': '0px',
easing: 'ease-in',
complete: function(){
nextUL.css('display','none');
console.log('animation ended');
}
});
$(this).removeClass('active');
icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
console.log('visible');
}else{
console.log('some error');
}
return false;
});
}());我这里有个小提琴可以修补:http://jsfiddle.net/lharby/o5w8ebu8/2/
我尝试过多种组合使用css可见性、jquery ()和隐藏()函数,但是每次转换开始时ul都消失了(点击有效)。我已经测试了Chrome,Firefox和Safari,以防出现异常。
发布于 2015-01-14 09:26:31
我相信回调是在正确的时间( 1000毫秒后)触发的,问题是转换动画不起作用。
在收缩的过渡中,改变为'height': 'auto'似乎达到了您所追求的效果。虽然我不能说我真的知道为什么。
https://stackoverflow.com/questions/27863680
复制相似问题