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”，它由每个链接共享。

您可以使用'open'类检索当前链接的状态信息：

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

必须单击两次才能使用click事件

1 个答案: