Question

我有一个顶部导航栏，当你点击一个megamenu向下滑动的项目时，如果你再次点击它，megamenu会向上滑动。

有时，我有z-index高于mengamenus的元素（链接和段落），所以当megamenus向下滑动时，它们会出现在megamenu的顶部。我用下面的代码解决了这个问题。

然而，通过解决这个问题，又出现了另一个问题，这就是我需要帮助的地方：

当megamenus向后滑动时，元素的z-index立即变回1，因此当megamenu向上滑动时，元素出现在megamenu的顶部。

有没有办法在megamenus完成滑动后更改这些元素的z-index？

到目前为止，这是我的代码：

$('.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。

Answer 4

根据Jeff的代码和Nick Craver的建议编写工作代码：

$(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-wrapper-wjs'不是注入z-index的对象：0。

再次感谢：）

jQuery：在效果完成后执行某些操作

4 个答案: