クリックした後の再トリガーイベント

Question

クリックイベントを防止するこのコードは、クリックして2回目に解決します。しかし、アイテム2をクリックしてアイテム1に戻っても、クリックイベントは防げません。アイテムの外側をクリックすると、最初からやり直したい。

JS

$('.dropdown').each(function() { 

     $(this).find('a').on('click.menuClick', function (e) { 

      e.preventDefault(); 

      $(this).parent().addClass('dropDownClass'); 
      $(this).off("click.menuClick"); 

     }); 
    }); 

HTMLここ

<ul class="dropdown"> 
    <li><a href="#">item 1</a></li> 
    <li><a href="#">item 2</a></li> 
</ul> 

はフィドル https://jsfiddle.net/gt1zhcyc/4/

Answer 1

は、この周りに非常にシンプルなロジックがありますです：代わりにバインドする.on()と.off()に依存するので/あなたをバインド解除カスタム名前空間のクリックイベント、.on() +クリックした状態iを保存することができますnアンカー要素のオブジェクトを返します。.data()

クリックした状態を、hasClickedのキーで要素に保存したとします。 <a>要素をクリックすると、.data('hasClicked')が偽であるかどうかを確認するだけです。定義されていない場合、またはfalseに設定されている場合はfalseに評価されます。もしそれが偽であれば、それはtrueに設定されます。これは、 "ちょっと前にクリックされました！"という状態を保存します。ここで、あなたもその兄弟のクリックされた状態にリセットすることができます

if (!$(this).data('hasClicked')) { 
    // Store state 
    $(this).data('hasClicked', true); 

    // Remove clicked state other anchor elements that is not self 
    $(this).closest('.dropdown').find('a') 
    .not(this) 
    .data('hasClicked', false); 

    // ... 
} else { 
    // Clicked the second time, we reset the clicked state 
    $(this).data('hasClicked', false); 

    // ... 
} 

をあなたが引き出すしたい第二のトリックは、クリックされた状態をリセットするために、これらの要素の外クリックです。イベントのバブルに頼るだけです。リンクからクリックイベントが発生すると、そのイベントがドキュメントに伝播するのを止めます。その間、ドキュメントオブジェクトに同じリスナーを設定して、クリックイベント（アンカー要素の外に出てきたはずのもの）をキャッチします。このイベントがキャッチされたときは、強制的に戻っfalseへのすべてのクリックされた状態をリセットします。

$(document).on('click.menuClick', function(e) { 
    $('.dropdown a').data('hasClicked', false); 
}); 

以下のロジックは、両方のロジックを組み合わせることにより、上記の解答を含む：

$(function() { 
 
    // Listen to click event on <a> 
 
    $('.dropdown a').on('click.menuClick', function(e) { 
 

 
    // TODO: Remove this, only for testing 
 
    e.preventDefault(); 
 

 
    // Prevent click event from bubbling 
 
    e.stopPropagation(); 
 

 
    // Check if element has been clicked before 
 
    // If never clicked before, we prevent action and store state 
 
    if (!$(this).data('hasClicked')) { 
 
     // Store state 
 
     $(this).data('hasClicked', true); 
 
     $(this).addClass('hasClicked'); 
 
     console.log('Clicked the first time'); 
 
     
 
     // Remove clicked state other anchor elements that is not self 
 
     $(this).closest('.dropdown').find('a') 
 
     .not(this) 
 
     .data('hasClicked', false) 
 
     .removeClass('hasClicked'); 
 
    } else { 
 
     $(this).data('hasClicked', false).removeClass('hasClicked'); 
 
     console.log('Second clikc, already clicked once'); 
 
    } 
 

 
    }); 
 

 
    // Listen to bubbling click event on document 
 
    $(document).on('click.menuClick', function(e) { 
 
    $('.dropdown a').data('hasClicked', false).removeClass('hasClicked'); 
 
    console.log('Click detected outside, resetting hasClicked state'); 
 
    }); 
 

 
});

.hasClicked { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="dropdown"> 
 
    <li><a href="google.com">item 1</a></li> 
 
    <li><a href="yahoo.com">item 2</a></li> 
 
</ul>