0

画面の左 (左: -662px) から左: 342px にスライドするサブメニューがあります。これは、プライマリ メニュー項目をクリックするとトリガーされます。

プライマリ メニューが再度クリックされると、サブメニューは -662px に戻ります。私の問題は、プライマリ メニュー項目が立て続けにクリックされた場合、サブメニュー要素が一度に 342 ピクセルずつページを横切って移動することです。思うように前後に動かない。

これは、要素のアニメーション中にのみ発生します。サブメニューのアニメーションが終了した後にプライマリ メニュー項目がクリックされると、必要に応じて -662px に戻ります。

.stop() を追加してみましたが、影響はありません。これを修正する方法を知っている人はいますか？

//IF IS SHOWN, HIDE
$("#menu ul li").click(function() {
  $("#menu ul li ul").each(function() {
   //GET SUBMENUS CURRENT POSITION  
    var sub2pos = $(this).css('left');
       //IF MARGIN IS GREATER THE 340PX HIDE THE MENU
        sub2pos = parseInt(sub2pos);
        if(sub2pos > 340){
         $(this).stop().animate({ left: '-=662px' }, 400 );
      }
  });//END EACHFUNCTION
});//END 1st CLICK FUNCTION

//IF IS HIDDEN, SHOW
$("#menu ul li").click(function() {
      //GET SUBMENUS CURRENT POSITION
      var sub2pos = $(this).children('ul').css('left');
      //IF MARGIN IS LESS THEN 342PX SHOW THE MENU
       sub2pos = parseInt(sub2pos);
      if(sub2pos < 342){
           $(this).children('ul').delay(500).stop().animate({ left: '+=662px' }, 400 );
      }
});//END 2nd CLICK FUNCTION

編集:ここでフィドルを作成しました。http://jsfiddle.net/q5Htx/19/メニュー項目をすばやくクリックするとどうなるか注意してください

4

2 に答える 2

2

私はいくつかのことを提案します：

表示ロジックと非表示ロジックを if-elseif ブロックを含む関数に移動して、どちらを実行するかを決定します。

function menuClickHandler(menu){//logic goes here}

次に、.click イベントを 1 回だけバインドし、その関数を呼び出します。

$(document).ready(function(){ 
    $("#menu ul li").on('click', function(e) { 
        menuClickHandler($(this)); 
    });
});

次に、メニューをアニメーション化する前と後に、関数でクリック イベントのバインド解除/バインドを調整します。

あなたのフィドルへの更新でここにもっと多くのコードがあります

-コードで on/off を使用していることに注意してください。バインド/アンバインドを使用して説明したのは、文法的に正しいように聞こえるためです。

于 2013-03-13T07:41:48.097 に答える
0

私は問題を見つけたと思います：

サブメニューがスライドアウトする 2 番目の if ステートメントをより具体的にする必要がありました。代わりに<342、要素の負の位置を指定する必要がありました: <= -662。そうすれば、div がleft 150px+342 から -662 の間などにある場合、アニメーションはトリガーされません。

于 2013-03-13T07:02:28.193 に答える