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

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>

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>

Answer 2

您必须切换addClass和removeClass通话。

因此，此块：

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

应为：

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

结果：

// Change +/-
$(".question").click(function() {
  if ($(this).next().is(":visible")) {
    $(this).removeClass("active");
  } else if ($(".question").next().is(":hidden")) {
    $(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>

Answer 3

通过将show / hide和+/-行为拆分为两个独立的函数，您引入了依赖jquery在一个之前先运行的复杂性，而且我不知道jquery是如何确定哪个先运行的。 / p>

我建议您在同一功能中同时执行两项操作，以确保正确维护状态。

// Change +/-
$(".question").click(function() {
  $(".answer").slideUp();
  if ($(this).next().is(":visible")) {
    $(this).removeClass("active");
    $(this).next().slideUp();
  } else {
    $(this).addClass("active");
    $(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>