Javascript 滑动切换仅适用于类为的第一个元素的属性

我试图创建一个下拉式手风琴框，当点击时，它可以在“+”和“-”之间切换。我用一个盒子来做这个。但是我想要一个盒子里的盒子。由于某种原因，“+”和“-”不能用于所有的框，只能用于第一个框。单击时将变为“-”，但再次单击时不会变回“+”。我假设我需要某种类型的每个函数，但我不知道该放在哪里

你可以在网站上看到一个例子

这是HTML

 <div class="dropdown">
  <h2 class="question">This is a question.</h2>
  <div class="drop-down-contents">
    <div class="dropdown">
      <h3 class="question">This is a question.</h3>
      <div class="drop-down-contents">
        <div class="dropdown">
          <h4 class="question">This is a question.</h4>
          <div class="drop-down-contents">
            <p>This is a paragraph.</p>
          </div>
        </div>
        <div class="dropdown">
          <h4 class="question">This is a question.</h4>
          <div class="drop-down-contents">
            <p>This is a paragraph.</p>
          </div>
        </div>
        <div class="dropdown">
          <h4 class="question">This is a question.</h4>
          <div class="drop-down-contents">
            <p>This is a paragraph.</p>

          </div>
        </div>
      </div>
    </div>
    <div class="dropdown">
      <h3 class="question">This is a question.</h3>
      <div class="drop-down-contents">
        <p>This is a paragraph.</p>
      </div>
    </div>
  </div>
</div>

请尝试下面的代码片段

$（“.question”）.attr（“下拉箭头”，“+”）；
$（“.question”）。单击（函数（）{
$（本）
.nextUntil（“.问题”）
.滑动切换（“慢速”，功能（）{
如果（$（this）.closest（“.drop-down contents”）是（“：visible”））{
$（this）.closest（“.drop-down contents”）.prev（“.question”）.attr（“下拉箭头”，“-”）；
}否则{
$（this）.closest（“.drop-down contents”）.prev（“.question”）.attr（“下拉箭头”，“+”）；
}
});
});
/*下拉框*/
.问题{
填充：10px；
外形：黑色实心3px；
轮廓偏移量：3倍；
保证金：自动0px；
背景：黑色；
颜色：#FFFFFF；
利润率：20px 0px；
光标：指针；
}
.下拉列表h2{
字体大小：1.5rem；/*问题字体大小*/
}
.下拉列表h3{
字体大小：1.3rem；/*问题字体大小*/
}
.下拉列表h4{
字号：1rem；/*问题字号*/
}
.下拉式目录{
显示：无；
左侧填充：2vw；/*行和答案之间的空格*/
}
.问题:在{
内容：attr（下拉箭头）；
文本对齐：右对齐；
浮动：对；
}

这是一个问题。
这是一个问题。
这是一个问题。
这是一段

这是一个问题。
这是一段

这是一个问题。
这是一段

这是一个问题。
这是一段

成功了！所以诀窍是找到最近的一个。非常感谢你！欢迎很高兴能帮上忙。如果这个答案对你有帮助，那么你可以回答，如果你喜欢/想要，你也可以回答，谢谢。
$(".question").attr("dropdown-arrow", "+");
$(".question").click(function() {
  $(this)
    .nextUntil(".question")
    .slideToggle("slow", function () {
      if ($(".drop-down-contents").is(":visible")) {
        $(this).siblings(".question").attr("dropdown-arrow", "-");
      } else {
        $(".question").attr("dropdown-arrow", "+");
      }
    });
});