必須點擊兩次點擊事件工作

Question

我有下面的代碼，動畫當您單擊a.discover一個元素：

$(document).on('click', 'a.discover', function(e){ 
      e.preventDefault(); 
      if(toggleState) { 
       $(this).addClass('open'); 
       $(this).parent().find('p.subtitle').stop(true,true).animate({'marginTop': -471}, 1200, "easeOutQuart"); 
      } else { 
       $(this).parent().find('p.subtitle').stop(true,true).animate({'marginTop': 21}, 1200, "easeOutQuart"); 
       $(this).removeClass('open'); 
      } 
      toggleState = !toggleState; 
     }); 

HTML

<div class="container"> 
    <p class="subtitle">Released on July 2013</p> 
    <a href="" class="discover">Discover Now</a> 

    <p class="subtitle">Released on July 2013</p> 
    <a href="" class="discover">Discover Now</a> 

    <p class="subtitle">Released on July 2013</p> 
    <a href="" class="discover">Discover Now</a> 
</div> 

CSS

.container a.discover{ 
    z-index: 100; 
    display:block; 
    position:absolute; 
    width:100%; 
    color:#fff; 
    text-decoration:none; 
    text-transform:uppercase; 
    bottom:0px; 
    text-align:center; 
    font-size:11px; 
    font-family: 'univers_55regular', arial,helvetica,clean,sans-serif; 
    padding-top:6px; 
    padding-bottom:6px; 
    background: url("../img/cross.png") no-repeat scroll 73px 7px #000; 
} 

.container p.subtitle{ 
    font-family: 'univers_45_lightregular', arial,helvetica,clean,sans-serif; 
    font-size:12px; 
    color:#000; 
    margin-top:21px; 
} 

.container{ 
    width:930px; 
    margin-left:35px; 
    } 

我有3個這樣的按鈕，所以當你點擊一個來設置它的動畫時，那麼你需要在它工作之前點擊兩次。一個想法可能是錯誤的？ 謝謝！

Answer 1

您似乎在使用全局變量「toggleState」，它由每個鏈接共享。

您可以使用「開放」類檢索狀態信息，當前鏈接：

$(document).on('click', 'a.discover', function(e){ 
      e.preventDefault(); 
      if($(this).hasClass('open')) { 
       $(this).parent().find('p.subtitle').stop(true,true).animate({'marginTop': 21}, 1200, "easeOutQuart"); 
       $(this).removeClass('open'); 
      } else { 
       $(this).addClass('open'); 
       $(this).parent().find('p.subtitle').stop(true,true).animate({'marginTop': -471}, 1200, "easeOutQuart"); 
      } 
     });