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。

再次感谢:)