jquery - 手风琴打开时如何将“+”号更改为“-”号？

Question

如问题中所述，当单击的问题的答案可见时，如何将“+”号正确更改为“-”号。

此时，单击两次问题时，“+”号变为“-”号。

总而言之，我只希望在关闭问题答案时显示“+”符号，并在打开问题答案时显示“-”符号。

// Change +/-
$(".question").click(function() {
  if ($(this).next().is(":visible")) {
    $(this).addClass("active");
  } else if ($(".question").next().is(":hidden")) {
    $(this).removeClass("active");
  }
});

// FAQ
$(".question").click(function() {
  $(".answer").slideUp();
  if ($(this).next().is(":visible")) {
    $(this).next().slideUp();
  } else {
    $(this).next().slideDown();
  }
});

.question {
  padding: 20px 5px;
  box-sizing: border-box;
  font-size: 1.2em;
  cursor: pointer;
  border-bottom: 1px solid #dddddd;
  display: flex;
  align-items: center;
}

.question:before {
  content: "+";
  color: #008aff;
  display: block;
  margin-right: 10px;
  font-size: 20px;
}

.question.active:before {
  content: '-';
  margin-right: 13.86px;
}

.answer {
  display: none;
  padding: 20px;
  line-height: 1.7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq">
  <div class="question">Question 1</div>
  <div class="answer">Answer 1</div>
  <div class="question">Question 2</div>
  <div class="answer">Answer 2</div>
  <div class="question">Question 3</div>
  <div class="answer">Answer 3</div>
</div>

标签： jquerycssaccordion

Answer 1

你有 addClass 和 removeClass 错误的方式。您还应该将 removeClass 应用于所有其他问题，以确保在不显示时显示 +。

// Change +/-
$(".question").click(function() {
  if ($(this).next().is(":visible")) {
    $(this).removeClass("active");
  } else if ($(".question").next().is(":hidden")) {
    $('.question').removeClass("active");
    $(this).addClass("active");
  }
});

// FAQ
$(".question").click(function() {
  $(".answer").slideUp();
  if ($(this).next().is(":visible")) {
    $(this).next().slideUp();
  } else {
    $(this).next().slideDown();
  }
});

.question {
  padding: 20px 5px;
  box-sizing: border-box;
  font-size: 1.2em;
  cursor: pointer;
  border-bottom: 1px solid #dddddd;
  display: flex;
  align-items: center;
}

.question:before {
  content: "+";
  color: #008aff;
  display: block;
  margin-right: 10px;
  font-size: 20px;
}

.question.active:before {
  content: '-';
  margin-right: 13.86px;
}

.answer {
  display: none;
  padding: 20px;
  line-height: 1.7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq">
  <div class="question">Question 1</div>
  <div class="answer">Answer 1</div>
  <div class="question">Question 2</div>
  <div class="answer">Answer 2</div>
  <div class="question">Question 3</div>
  <div class="answer">Answer 3</div>
</div>