動畫後我不能點擊元素（我猜不出來）

Question

我不能爲我的生活找出爲什麼建立這個地鐵網格後http://codepen.io/anon/pen/yoxzp，如果它已經被展開，我不能再次點擊同一個正方形。任何人都可以很好地幫助我嗎？

var tile = $('.metro-grid > * '); 
tile.on('click', function() { 
    tile.not($(this)) 
     .addClass('fade-out') 
     .addClass('hidden'); 
    $(this).removeClass('hidden') 
     .addClass('flip') 
     .addClass('exploded-tile'); 
    tile.not($(this)) 
     .addClass('hidden'); 
    $(this).children() 
     .data('function', 'exploded_content') 
     .removeClass('hidden'); 
    tile.click(revert); 
}); 

function revert() { 
    tile.removeClass('hidden') 
     .removeClass('flip') 
     .removeClass('exploded-tile') 
     .removeClass('fade-out'); 
    $('[data-function="exploded_content"]').removeClass('shown').addClass('hidden') 
} 


<header>Click to expand/Click again to close.. But try clicking the same tile after it has been restored to its default state</header> 
<div id="main" role="main"> 
    <article class="metro-grid animated"> 
    <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become <a href="javascript:alert('!')">dfdfefef</a> 
     <img src="http://placehold.it/1550x1550/ffffff" alt="" /> 
     </div> 
    </section> 
     <section class="large-tile"> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section class="medium-tile"> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 

     <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
     <section class="large-tile"> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section class="medium-tile"> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 
    <section> 
     <h1>Tile title</h1> 
     <h2>Tile subtitle</h2> 
     <div class="hidden" data-function="exploded_content"> 
     This is additional stuff that will become hidden 
     </div> 
    </section> 

    </article> 

<!-- <button onclick="revert()" style="position: fixed; top: 0; z-index: 10;">Revert</button>--> 
</div> 

<footer> 

</footer> 

Answer 1

的問題是，當你翻轉你還綁定了「恢復」處理 -

所以，第二次你點擊它，它執行「翻轉」和「恢復」。

第三次點擊它時，它會執行「翻轉」和兩次「恢復」。

更好的解決方案 - 處理翻轉或基於當前狀態恢復， 即：

.on('click', function(){ 
    if ($(this).hasClass('flip')) { 
     // if already flipped - revert 
     revert(); 
     return false; 
    } 
    // not flipped yet - do the flip! 
    // - but don't bind revert handler to click at the end ! 
    ... 

編輯：既然你問 - 我在這裏展示瞭如何做自己的方式 - 但對於小的東西，例如因爲在單個處理程序中翻轉「if」語句的可讀性要高得多，不易出現錯誤等等。

要做到這一點，您必須解除以前的點擊處理程序的綁定，如下所示：

function flip() { 
    // flip code here... 
    $(this).off('click.flipper').on('click.flipper', revert); 
} 
function revert() { 
    // revert code here... 
    $(this).off('click.flipper').on('click.flipper', flip); 
} 
$('.metro-grid > *').on('click.flipper',flip); // click handler with "flipper" event namespace