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 。