Jquery 必须单击两次才能使单击事件生效

我有以下代码，用于在单击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

我有三个这样的按钮，所以当你点击其中一个来设置动画时，你需要点击另外一个两次，然后它才能工作。一个可能有问题的想法？

---

谢谢

您似乎在使用一个全局变量“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" );
            }
        });

---

你能同时发布CSS还是小提琴？谁是

toggleState

或者那是什么？使用.dblclick（）并设置一个标志，如果已经对另一个按钮进行了一次单击，则启用.dblclick（）。

.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;
    }

$(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" );
            }
        });