javascript - jQuery slidetoggle 出现故障

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> 是 block 状的。)

其次，<p>标题文本应该有 margin: 0 .