Javascript i'；之后如何选择特定元素；我单击了同一分区中的另一个元素

我有一个h3元素和一个p元素，它们位于div元素内，如下所示：

<div class="question">
    <h3> <a href="#"> *a question* <img class="arrow" src="" alt="an-arrow-img"> </img> </a> </h3>
    <p> *an answer* </p>
</div>

//shows the answer when I click the h3 element
.show{
   display: block;
}

在网站上，我试图让问题的答案看起来像这样：

<div class="question">
    <h3> <a href="#"> *a question* <img class="arrow" src="" alt="an-arrow-img"> </img> </a> </h3>
    <p> *an answer* </p>
</div>

//shows the answer when I click the h3 element
.show{
   display: block;
}

显示隐藏p元素

我使用javascript在单击问题（h3元素）时切换类“show”，但我切换了所有问题，无法确定如何选择我单击的问题。到目前为止，我的javascript代码如下：

$("h3").on("click", function(){
   $("p").toggleClass("show");
});

是我的HTML结构出错了，还是有办法组合$（this）选择器，只显示我单击的问题的答案？

使用JQuery.next（）选择$this的同级项

$（“h3”）。在（“单击”，函数（）{
$（this）.next（“p”）.toggleClass（“show”）；
});
var-question=document.getElementsByClassName（“问题”）；
var i；
对于（i=0；i

。问题{
背景色：#2d6596；
颜色：#f1f1；
光标：指针；
填充：18px；
宽度：100%；
边框：1px纯白；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
.活动，.问题：悬停{
背景色：#1a364f；
}
.问题:在{
内容：“\002B”；
颜色：#f1f1；
字体大小：粗体；
浮动：对；
左边距：5px；
}
.活动：之后{
内容：“\2212”；
}
.答复{
填充：0 18px；
背景色：#F2F2；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}
问题
答案

问题
答案

问题
答案

This：这是否回答了您的问题？阅读：非常感谢您的回答，next（）方法工作正常，语法清晰！