Javascript jQuery滑动切换出现故障

首先，我将描述我从哪里开始。我首先有一个这样的设置：

<div class="Q">
    <p><strong>What is an exchange?</strong></p>
    <p class="A">Text goes in here</p>
</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);
});

我已经多次使用此函数，但对于它的运行方式，我有点困惑。

此故障是双重的

被切换的

的样式在可见时设置为

display:inline

。使用

代替

，这样可以解决您的问题。（与块相对的

的默认显示属性是内联的。）

---

其次，标题文本所在的

应该有

边距：0

嗯，你的眼光不错，我没有看到它添加内联。但是我有一个问题，我不能使用

p

，因为它不会隐藏

ul

、

ol

、或

表。我最初把它作为
p
标签，它仍然可以工作，但这是我最初的问题，即
p
标签出现故障

用

p

标记清除了轻微的故障，但是想知道为什么

p

标记不会隐藏任何

ul

、

ol

或

表

？如果切换元素不能与

p

标记一起工作，请尝试使用

div

。

div

也有一个默认的显示值block。我很感谢所有的帮助，但是在尝试了更多的选项之后，它们都出现了故障。我想我只是想放弃这个想法，开始另一种方法。

表，ul，ol

的问题是，它们必须是父

p

或

div

标记的子级（内部），而不是相邻（旁边）。我认为你的方法还可以，只是需要一些微调。

$('.Q ').on('click', function() { // Q and A function
    $(this).find('.A').stop(true).slideToggle(500);
});