javascript - 动画后无法单击元素(我猜不到)

Question

在 build 这个地铁网络后，我一辈子都想不通为什么 http://codepen.io/anon/pen/yoxzp ，如果它已经展开，我不能再次点击同一个方 block 。有人愿意帮我解决这个问题吗？

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

问题是，当您翻转时，您还绑定(bind)了一个“还原”处理程序 -

因此，您第二次单击它时，它会执行“翻转”和“还原”。

第 3 次单击它时，它会执行“翻转”和两次“还原”。

更好的解决方案 - 根据当前状态处理翻转或还原， 即:

.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”语句更具可读性，更少容易出现错误等...

要按照您的方式进行操作，您必须像这样取消绑定(bind)以前的点击处理程序:

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