的jQuery了slideDown如果元素目前正在「下滑」

Question

我有這個標記：

 <span id="tabPhp" class="infoData">PHP</span> 
     <span id="tabJquery" class="infoData">jQuery</span> 
     <span id="tabWordpress" class="infoData">WordPress</span> 
     <span id="tabCss3" class="infoData">CSS3</span> 
     <span id="tabMysql" class="infoData">MySQL</span> 
     <div class="infoExpand"> 
      <p id="infoPhp">PHP</p> 
      <p id="infoJquery">jQuery</p> 
      <p id="infoWordpress">Wordpress</p> 
      <p id="infoCss3">CSS3</p> 
      <p id="infoMysql">MySQL</p> 
     </div> 

這jQuery的：

$('.infoData').click(function(){ 
    $('.infoExpand p').hide(); 
    var id = this.id; 
    id = id.replace("tab", "info"); 
    console.log(id); 
    $('.infoExpand, #' + id).slideToggle(); 
}); 

默認格infoExpand設置爲顯示：無所以我想要發生的是，當用戶點擊span id tabPHP時，infoExpand與p id infoPhp一起滑落。這工作正常，但當用戶點擊另一個選項卡時，它只會滑動當前顯示的p。我希望它滑動當前的一個，並滑下他們點擊的那個。

這有道理嗎？

感謝

Answer 1

你可以做（​​修訂版）：

$('.infoExpand p').hide(); 
$('.infoData').click(function(){ 
    var id = this.id; 
    id = id.replace("tab", "info"); 
    var clicked = $('.infoExpand #' + id); 
    if (clicked.is(':visible')){ 
     clicked.slideToggle(); 
    }else{ 
     $('.infoExpand p:visible').slideToggle(); 
     clicked.slideToggle(); 
    } 

}); 

小提琴這裏：http://jsfiddle.net/35MfY/1/