jQuery slidetoggle出现故障

Question

首先，我将描述我从哪里开始。 我首先进行了如下设置：

<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 ，该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);
});

我已经多次使用了此功能，对此功能的表现我感到有些困惑。

Answer 1

毛刺是2倍。

切换的<span>的样式设置为display: inline可见。 代替<span>使用<p>可以解决您的问题。 （ <span>的默认显示属性为内联，而不是<p>的阻止属性。）

其次，标题文本所在的<p>应该有margin: 0 。