jQuery：在效果完成後執行某些操作

Question

我有一個頂級導航欄，當您單擊一個megamenu滑下的項目時，如果再次單擊它，megamenu會滑回。

有時，我有元素（鏈接和段落），其z指數高於mengamenus，所以當megamenus滑落時，它們出現在megamenu的頂部。我用下面的代碼解決了這個問題。

然而，解決這一問題，另一個人來了，這是我需要的幫助：

當megamenus都滑回了，元素的z-index的立即改回1，從而元素出現在megamenu的頂部，而megamenu滑回去。

有沒有辦法改變這些元素的z-index行爲後megamenus完成滑動備份？

這裏是我到目前爲止的代碼：

$('.click-menu h6 span').click(function() { 
    if ($(this).hasClass('selected')) { 
     $(this).removeClass('selected'); 
     $(this).parent().next().slideUp('fast'); 
     $('.generic-box a, .generic-box p').css('z-index', '1'); 
    } else { 
     $('.click-menu h6 span').removeClass('selected'); 
     $(this).addClass('selected'); 
     $('.click-menu div').slideUp('fast'); 
     $(this).parent().next().slideDown('fast'); 
     $('.radio-btns-wrapper-wjs').slideUp('fast'); 
     $('.generic-box a, .generic-box p').css('z-index', '0'); 
    } 
}); 

任何幫助將不勝感激。

Answer 1

兩個slideUp和slideDown接受執行一次動畫完成後可選回調參數：

$('.click-menu h6 span').click(function(){ 
    if ($(this).hasClass('selected')) { 
     $(this).removeClass('selected'); 
     $(this).parent().next().slideUp('fast', function() { 
      $('.generic-box a, .generic-box p').css('z-index','1');  
     }); 
    } else { 
     $('.click-menu h6 span').removeClass('selected'); 
     $(this).addClass('selected'); 
     $('.click-menu div').slideUp('fast'); 
     $(this).parent().next().slideDown('fast'); 
     $('.radio-btns-wrapper-wjs').slideUp('fast', function() { 
      $('.generic-box a, .generic-box p').css('z-index','0'); 
     }); 
    } 
}); 

Answer 2

.slideUp()採用了回調...你可以運行在一個功能z-index變化有，像這樣：

$(this).parent().next().slideUp('fast', function() { 
    $('.generic-box a, .generic-box p').css('z-index','1'); 
}); 

Answer 3

你可以使用setTimeout（）函數然後檢查某個類。如果該類存在，則可以使用addClass或toggleClass函數添加新的z-index。根據傑夫的代碼和尼克Craver的建議

Answer 4

工作代碼：

$(function(){ 
//Megamenus  
$('.click-menu h6 span').click(function(){ 
    if ($(this).hasClass('selected')) { 
    $(this).removeClass('selected'); 
    $(this).parent().next().slideUp('', function() { 
     $('.generic-box a, .generic-box p').css('z-index','1'); 
}); 

} else { 
    $('.click-menu h6 span').removeClass('selected');  
    $(this).addClass('selected'); 
    $('.click-menu div').slideUp('fast'); 
    $(this).parent().next().slideDown('fast'); 
    $('.generic-box a, .generic-box p').css('z-index','0'); 
    $('.radio-btns-wrapper-wjs').slideUp(''); 
    } 
    }); 
}); 

我不得不刪除的z-index：0出來的功能，因爲」 .radio-btns - 包裝 - WJS'不注入z-index的對象：0。

再次感謝:)