javascript - jQuery 滑动切换出现故障

Question

为了开始这个，我将描述我从哪里开始。我第一次有这样的设置：

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

这在这个小提琴中工作正常，但我有一些答案包含 aul或table其中的信息。会p隐藏得很好，但不会隐藏ulor 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);
});

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

score 1 · Accepted Answer

故障是 2 倍。

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

其次，标题文本所在的应该有margin: 0.

1 回答 1