单击同一 div 中的另一个元素后如何选择特定元素

Question

我有一个 h3 元素和 ap 元素，它们位于 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>我的 css 文件中有一个名为“show”的类，如下所示：//shows the answer when I click the h3 element.show{   display: block;}在网站上，我试图使问题答案看起来像这样：显示-隐藏 p 元素当我单击问题（h3 元素）时，我使用 javascript 来切换类“show”，但我切换了所有这些问题，并且不知道如何选择我单击的那个。到目前为止，我的 JavaScript 代码是这样的：$("h3").on("click", function(){   $("p").toggleClass("show");});是我的 HTML 结构错误，还是有办法结合 $(this) 选择器来仅显示我单击的问题的答案？

Answer 1

var question = document.getElementsByClassName("question");

var i;

for (i = 0; i < question.length; i++) {

  question[i].addEventListener("click", function() {

    this.classList.toggle("active");

    var answer = this.nextElementSibling;

    if (answer.style.maxHeight) {

      answer.style.maxHeight = null;

    } else {

      answer.style.maxHeight = answer.scrollHeight + "px";

    } 

  });

}

.question {

  background-color: #2d6596;

  color: #f1f1f1;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: 1px solid white;

  text-align: left;

  outline: none;

  font-size: 15px;

  transition: 0.4s;

}

.active, .question:hover {

  background-color: #1a364f;

}

.question:after {

  content: '\002B';

  color: #f1f1f1;

  font-weight: bold;

  float: right;

  margin-left: 5px;

}

.active:after {

  content: "\2212";

}

.answer {

  padding: 0 18px;

  background-color: #f2f2f2;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

<button class="question">The question</button>

<div class="answer">

  <p>The answer</p>

</div>

<button class="question">The question</button>

<div class="answer">

  <p>The answer</p>

</div>

<button class="question">The question</button>

<div class="answer">

  <p>The answer</p>

</div>

Answer 2

使用 JQuery.next() 选择 $this 的同级。

$("h3").on("click", function(){

   $(this).next("p").toggleClass("show");

});