javascript - SlideToggle 仅适用于具有类的第一个元素的属性

Question

我正在尝试创建一个下拉手风琴框，单击该框时会在“+”和“-”之间切换。我得到了这个与一个盒子一起工作。但我想在一个盒子里有一个盒子。由于某种原因，“+”和“-”不适用于所有框，仅适用于第一个框。单击时它将变为“-”，但再次单击时不会变回“+”。我假设我需要某种功能，但我不知道把它放在哪里。

你可以在https://codepen.io/rebeccagracedesigns/pen/GRrGvGK看到一个例子

这是 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>

这是 jQuery

$(".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", "+");
      }
    });
});

标签： javascriptjquery

Answer 1

试试下面的片段

$(".question").attr("dropdown-arrow", "+");
$(".question").click(function() {
  $(this)
    .nextUntil(".question")
    .slideToggle("slow", function () {
      if ($(this).closest(".drop-down-contents").is(":visible")) {
        $(this).closest(".drop-down-contents").prev(".question").attr("dropdown-arrow", "-");
      } else {
        $(this).closest(".drop-down-contents").prev(".question").attr("dropdown-arrow", "+");
      }
    });
});

/* Dropdown Box */
.question {
  padding: 10px;
  outline: black solid 3px;
  outline-offset: 3px;
  margin: auto 0px;
  background: black;
  color: #FFFFFF;
  margin: 20px 0px;
  cursor: pointer;
}
.dropdown h2{
 font-size: 1.5rem; /*question font size */
}

.dropdown h3{
 font-size: 1.3rem; /*question font size */
}

.dropdown h4{
 font-size: 1rem; /*question font size */
}

.drop-down-contents {
display:none;
padding-left: 2vw; /*space between line and answer */
}

.question:after{
content: attr(dropdown-arrow);
text-align:right;
float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>