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倍。

正在切换的样式在可见时设置为display: inline。而不是使用而应该解决您的问题。（的默认显示属性是内联的，而不是阻止的。）

其次，标题文字所在的应为margin: 0。