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

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如何决定首先运行哪个。

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

// 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>