當單擊另一個元素時，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'); 
     } 
}); 

側面說明我知道transitio n爲僅定位的WebKit現在

Answer 1

我想你忘記了此行：

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

Answer 2

這是你在找什麼？ http://jsfiddle.net/csFBA/

不正是某些是什麼原因導致你的問題，但事情成爲當你建立你的代碼多一點清潔得更爲清晰。

// You really don't need to do a find('a') here... use the proper selector 
$('.box a').click(function (e) { 
    e.preventDefault(); 
     var $this = $(this); 
     // Only do one call to get the active state 
     var blnActive = $this.hasClass("active"); 
     // now remove the active class from this item 
     $this.removeClass("active"); 

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

是不是從你的描述很清楚你的確切問題是，但也許清理你的jQuery會讓你更接近你想要的位置。

Answer 3

解決方案已經提供給您，但我喜歡與您分享我的短版本。

$('.blanket').on("click", function(event){ 
    var $this = $(this); 
    $this.toggleClass('active').find('span').toggleClass('activeArrow'); 
    return false; 
}); 

Fiddle