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。