2010-12-02 16 views
0

トップナビゲーションバーがあります。アイテムをクリックするとメガメニューが下にスライドします。再度クリックすると、メガメニューが後ろにスライドします。jQuery:エフェクトが終了した後に何かを実行します。

メガネナスよりもzインデックスが高い要素(リンクと段落)があることがあります。メガネナスが下にスライドすると、メガメニューの上に表示されます。私はこの問題を以下のコードで解決しました。したがって、megamenusがバックアップスライディングされている場合

、要素のzインデックスは、直ちに1に戻って変更されます。

しかし、この問題を解くことによって、他の一つは上がってきた私は助けを必要とする場所ですメガメニューが上にスライドしている間に要素がメガメニューの上に表示されます。

メガネナスのスライドアップが完了した後で、これらの要素のZ-インデックスを変更する方法はありますか?ここで

は、これまでの私のコードです:

$('.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'); 
    } 
}); 

任意の助けいただければ幸いです。

答えて

5
両方 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'); 
     }); 
    } 
}); 
+0

ありがとうございます。私のコードヒントは、構文エラーがあると私に伝えますか? $(function(){ $( '。クリックメニューh6 span'){ if($(this).hasClass( 'selected')){ $(this).removeClass 'selected'); $(this).parent()。next()。slideUp( 'fast'、function(){ $( 'ジェネリックボックスa、.generic-box p'} else { $( '。クリックメニューh6スパン')removeClass( 'selected'); $(this).addClass( 'selected') ; $( '。クリックメニューdiv')slideUp( 'fast'); $(this).parent()。next()。slideDown( 'fast'); $( '。ラジオ-btns- css( 'z-index'、 '0');( 'generic-box a、generic-box p')。 10}); }); –

+0

最後にエラーが表示されます}); - 申し訳ありませんが、コメントセクションのコードを掲載するのが悪いです。 –

+0

そこに行く!最初のコードを誤読し、元の字下げ(およびelse節の終わり)を見落としました。 –

1

.slideUp()はこのように、あなたはそこに関数内z-index変更を実行することができます...コールバックを取ります

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

setTimeout()関数を使用して、特定のクラスをチェックすることができます。クラスが存在する場合は、addClassまたはtoggleClass関数を使用して新しいZ-インデックスを追加できます。 「.radio-btns-ラッパーWJS'はありませんでしたので、機能のうち0:ジェフのコードとニックCraverの提案に基づいてコードの作業

0

$(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インデックスを削除する必要がありましたz-index:0を注入するオブジェクト。

ありがとうございました。

関連する問題