2011-12-13 14 views
0

いくつかのボタンを持つスムーズなナビゲーションバーを作成しようとすると、各ボタンがクリックされると関連する情報が少しずつ表示されます。JQuery - ナビゲーションメニューslideUp/slideDownへの移行

しかし、ボタンをクリックするとdivを開き、別のボタンをクリックすると、正しいコンテンツをユニバーサルdivにロードする際に問題が発生しますボタンのコンテンツを表示します。

あなたがあるボタンからdivを開いてからもう1つの本当のクイックをクリックすると、最初の試行を隠したり、すぐに2番目のボタンに移動するように修正するにはどうすればいいですか?今、私がそれを行うと、新しいdivが表示された後に.empty()が実行されるため、コンテンツが正しくロードされません。

今、私はちょうどそれを遅延させるためにsetTimeout関数を使用しますが、正しく動作しません。

*注 - ちょうど.clickの代わりに.onを使用します。これは、ユーザーがどのページにいるかによってメニューが動的に作成されるためです。これはclickイベントをバインドするのに役立ちます。

//CONTROL BAR 
    //CLICK OFF OF FORMS 
    $(document).on('click','.clear_overlay, .control_bar',function(){ 
     hideForm(); 
    }); 
    //SHOW FORM 
    $(document).on('click','.control_bar li.button',function(){ 
     //CHECK IF CURRENTLY OPEN 
     if(!$(this).hasClass('pressed')){ 
      var form = this; 
      setTimeout(function(){showForm(form)},210); 
     } 
    }); 

    //SHOW FORM 
    function showForm(form){ 
     var str = $(form).attr('class').split(' '); 
     var cl = str[0]; 
     var id = $(form).attr('id'); 
     var x = $(form).position().left; 
     var y = $(form).position().top; 
     x += 230; 
     y += 50; 
     $('.clear_overlay').show(); 
     $('body').css('overflow','hidden'); 
     $('.control_bar_form').load('_forms/'+cl+'.php',function(){ 
      $('.control_bar_form').find('.button_submit').attr('id',id); 
      $('.control_bar_form').css({ "left": x, "top":y }); 
      $('.control_bar_form').slideToggle(200); 
      $(form).addClass('pressed'); 
     }); 
    } 
    function hideForm(){ 
     $('.clear_overlay').hide(); 
     $('body').css('overflow','auto'); 
     $('.control_bar_form').slideUp(200,function(){ 
      $('.control_bar li').removeClass('pressed'); 
      $('.control_bar_form').empty().css('width','auto'); 
      $('.control_bar_form :input[type="text"]').val(''); 
      $('.control_bar_form :input[type="checkbox"]').removeAttr('checked'); 
      $('.clear_overlay').hide(); 
     }); 
    } 

答えて

0

クリックイベントに間違いがあります。接続方法は次のとおりです。

$('.control_bar li.button').click(function(){ 
//Stuff here 
}); 
+0

いいえ、うまくいきません。ナビゲーションメニューの内容が動的に作成されるため、.onを使用して行う必要があります。したがって、通常の.click関数を使用することはバインドされません。 – JimmyJammed

+0

O ok、正直言って私は何の問題も見ません。 SafariまたはFFでそれを実行し、[要素の検査]をクリックしてエラーを確認してください。非常に役立ちます。 –

+0

実際のエラーはありません。このエラーは、 'slideDown'が発生したときに 'slideUp'が終了していないため、slideUpコールバックで呼び出された.empty()関数が、他のdivのslideDown(および新しいコンテンツの読み込み)新しいdivの内容が空になってしまいます。 – JimmyJammed

0

このエラーの回避策が見つかりました。 slideUp時間を1に変更すると(つまりslideUp(1))、.empty()呼び出しの実行が速くなり、新しいコンテンツを読み込むことができます。

可能であれば、私はもっと良い解決策を望んでいます。しかしこれは今のところうまくいく。

0

問題は、スクリプトの一部が、別の部分が動作している状態を十分に認識していないことです。つまり、状態を説明する変数を追加し、ステートをチェックする必要があるスクリプトの部分に変数が表示されるようにする必要があります。何かのように

var isOpening = false;

これは、showForm()関数ではtrueに設定され、最後のコールバックではfalseに戻ります。 hideForm()関数はこの変数の値をチェックし、真であれば返すだけです。