jQuery slidetoggle is glitchy

Question

要開始這個關閉，我會描述我從哪裏開始。我第一次有一個設置是這樣的：

<div class="Q"> 
    <p><strong>What is an exchange?</strong></p> 
    <p class="A">Text goes in here</p> 
</div> 

這是this fiddle工作不錯，但我有一個包含ul或table在它的信息的幾個答案。 p會隱藏得很好，但它不會隱藏ul或table。

當我正在寫這個答案時，我決定讓p class="A"成爲一個span，它現在隱藏它們，但造成了一個更奇怪的問題。當你點擊問題時，它會立即顯示內容。然後當你再次點擊它時，它會像它應該滾動一樣，但最後會出現一些奇怪的衰落故障。

在我把它變成一個跨度之前，它上下滾動得很好，但它在滾動結束時會慢慢地出現毛刺。

前8個問題當前設置爲spans，所以您可以看到我收到的奇怪效果。之後的問題顯示了當它們被設置爲p時發生的故障。

這裏是現場直播，click here.

HTML

<div class="Q"> 
    <p><strong>What is an exchange?</strong></p> 
    <span class="A">Answer goes here</span> 
</div> 

CSS

/* Q and A Format */ 

.Q > p > strong { 
    cursor: pointer; 
    background: #c1c1c1; 
    width: 100%; 
    display: block; 
} 

.A { 
    display: none; 
} 

jQuery的

$('.Q ').on('click', function() { // Q and A function 
    $(this).find('.A').stop(true).slideToggle(500); 
}); 

我已經多次使用這個函數，我對它的行爲有些困惑。

Answer 1

毛刺是2倍。

當可見時，正在切換的<span>的樣式設置爲display: inline。而不是<span>使用<p>，這應該解決您的問題。 （<span>的默認顯示屬性是內聯的，而不是<p>這是塊。）

其次，標頭文本所在的<p>應該有margin: 0。