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

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 调用。

所以这个块：

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

您对 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 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>

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

How do I change the "+" to a "-" sign when the accordion is open?

css

jquery

accordion