好了，所以我做了一個可行的解決方案......它並不像我想的希望，但無論如何這裏相當直線前進是工作代碼：
jQuery(document).ready(function($){
var legacyMode = $('html').hasClass('oldie');
var titles = {normal: "Show sub-topics", active: "Hide sub-topics"};
var sub_sections = $('ul#map li:has(ul.child)');
sub_sections.each(function() {
if (!$(this).find('li.active').length && !$(this).hasClass('active')) {
var child = $(this).children('ul.child');
if (!legacyMode) {
child.css({height : '0px', opacity : 0, display: 'none'});
} else {
// Omits opacity to avoid using proprietary filters in legacy browsers
child.css({height : '0px', display: 'none'});
}
var toggle = $('<a class="toggle" href="#"></a>').attr('title', titles.normal).insertBefore(child);
toggle.data('container', this);
}
});
$('a.toggle').click(function (event) {
event.preventDefault();
var target = $(this).siblings('ul.child');
if($(this).hasClass('active')) {
toggleDisplay(target, false);
$(this).removeClass('active').attr('title', titles.normal);
} else {
toggleDisplay(target, true);
$(this).addClass('active').attr('title', titles.active);
}
function toggleDisplay(target, on) {
var targetOpacity = 0;
var targetHeight = 0;
if (on) {
// Get height of element once expanded by creating invisible clone
var clone = target.clone().attr("id", false).css({visibility:"hidden", display:"block", position:"absolute", height:""}).appendTo(target.parent());
targetHeight = clone.height();
targetOpacity = 1;
console.log(clone.height());
clone.remove();
target.css({display : 'block'});
}
if (!legacyMode) {
target.stop(true, false).animate({height: targetHeight + "px" , opacity: targetOpacity}, {
duration: 500,
complete: function() {
if (on) {
$(this).css({height : '', opacity : ''});
} else {
$(this).css({display : 'none'});
}
}
});
} else {
// Omits opacity to avoid using proprietary filters in legacy browsers
target.stop(true, false).animate({height: targetHeight + "px"}, {
duration: 500,
complete: function() {
if (on) {
$(this).css({height : ''});
} else {
$(this).css({display : 'none'});
}
}
});
}
}
});
});
看到它在行動：http://jsfiddle.net/xetCd/24/（點擊任何次數的任意次數的切換的任何組合都應該保持平穩）。
測試了：IE7，IE8（設置var legacyMode到true以獲得最佳效果），火狐15，鉻23
它是如何工作的？那麼我不再使用show和hide動畫目標，因爲它們不夠靈活。爲此，我不得不有點不同隱藏ul s的初始化：在
var child = $(this).children('ul.child');
if (!legacyMode) {
child.css({height : '0px', opacity : 0, display: 'none'});
} else {
// Omits opacity to avoid using proprietary filters in legacy browsers
child.css({height : '0px', display: 'none'});
}
var toggle = $('<a class="toggle" href="#"></a>').attr('title', titles.normal).insertBefore(child);
現在這種多汁位，如何計算元素的目標高度時，它可能是在動畫中的任何階段，有任何數量的子菜單的打開或關閉。我通過創建元素的visibility : hidden副本並強制它佔用它的常規高度來解決此問題，我也給它position : absolute，以便它看起來不佔用文檔中的任何空間。我抓住它的高度並將其刪除：
var targetOpacity = 0;
var targetHeight = 0;
if (on) {
// Get height of element once expanded by creating invisible clone
var clone = target.clone().attr("id", false).css({visibility:"hidden", display:"block", position:"absolute", height:""}).appendTo(target.parent());
targetHeight = clone.height();
targetOpacity = 1;
console.log(clone.height());
clone.remove();
target.css({display : 'block'});
}
然後，我的動畫，並確保重置display並刪除height（這樣子菜單的可擴展他們的父母）性質：
if (!legacyMode) {
target.stop(true, false).animate({height: targetHeight + "px" , opacity: targetOpacity}, {
duration: 500,
complete: function() {
if (on) {
$(this).css({height : '', opacity : ''});
} else {
$(this).css({display : 'none'});
}
}
});
} else {
// Omits opacity to avoid using proprietary filters in legacy browsers
target.stop(true, false).animate({height: targetHeight + "px"}, {
duration: 500,
complete: function() {
if (on) {
$(this).css({height : ''});
} else {
$(this).css({display : 'none'});
}
}
});
}
謝謝閱讀。
謝謝，但我想它從它結束的框架動畫。這不可能嗎？ –
在這種情況下，您需要稍微修改代碼。在動畫過程開始之前向該元素添加一個'animating'類，並在動畫完成後將其刪除。檢查元素是否具有動畫類，如果沒有，則只運行show hide。更新你的小提琴：http://jsfiddle.net/xetCd/7/ – kayen
我認爲你誤解了，代碼提出了一些新的問題，特別是在可用性部門，但+1的努力。我不想像'.stop（true，false）'那樣工作，但不會卡住。所以它從用戶決定切換它的任何點開始動畫。 –