jQuery滑动切换是故障

首先，我将描述我从哪里开始。我首先有这样的设置：

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

这在这个小提琴中工作正常，但我有一些答案，其中包含一个ul或table其中包含信息。p可以隐藏得很好，但它不会隐藏ul或table。

当我写这个答案时，我决定把p class="A"变成一个span，现在隐藏了它们，但引起了一个更奇怪的问题。当您单击问题时，它将立即显示内容。然后，当您再次单击它时，它将像应有的一样滚动，但最后会出现一些奇怪的褪色故障。

在我把它变成一个跨度之前，它上下滚动得很好，但在向上滚动结束时它会慢慢出现故障。

前 8 个问题目前设置为spans，因此您可以看到我得到的奇怪效果。之后的问题显示了当它们被设置为p时故障是如何发生的。

这是实时站点，请单击此处。

.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);
});

我已经多次使用此功能，我对它的行为方式感到有些困惑。