jQuery 添加类在单击另一个类时删除

Question

单击下一个项目后，将元素返回到其开始位置时出现问题。

当用户将鼠标悬停在 div.box 上时，两个元素会发生过渡，单击该元素时，该元素应保持在原位。当单击相同的项目打开/关闭时，此功能可以正常工作。问题是当单击下一个项目时，跨度保持在 a.blanket 的中心。

代码:http://jsfiddle.net/MhLwH/3/

HTML:

<div class="box">
    <div class="img"></div>
    <a href="" class="blanket">
        <span class="arrow"></span>
    </a>
</div>

<div class="box">
    <div class="img"></div>
    <a href="" class="blanket">
        <span class="arrow"></span>
    </a>
</div>

CSS:

.box {
    width:200px;
    height:200px;
    background:red;
    float:left;
    margin-left:10px;
    margin-top:50px;
    position:relative;
    /*overflow:hidden*/
}
.blanket {
    width:100%;
    height:100%;
    position:absolute;
    top:100%;
    left:0;
    background:blue;
}
.blanket, .arrow {
   -webkit-transition: all 0.3s ease-in; 
}
.arrow {
    display:block;
    width:100px;
    height:100px;
    position:relative;
    background:black;
    top:-300px;
    z-index:9999;
}
.box:hover .blanket {
    top:0;
}
.box:hover .blanket span {
    top:53px;
}
.active {
    top:0;
}
.activeArrow {
    top:53px;
}

JS:

$('.box').find('a').click(function (e) {
    e.preventDefault();
        var $this = $(this);

        if ($this.is('.active')) {
            $this.removeClass('active');
            $this.find('span').removeClass('activeArrow');

        } else {
            $('a.active').removeClass('active');
            $this.addClass('active');
            $this.find('span').addClass('activeArrow');
        }
});

旁注我知道过渡目前仅针对 webkit

Answer 1

我想你忘记了这一行:

$('span.activeArrow').removeClass('activeArrow');