單擊切換類

Question

我正在建立一個常見問題解答，每個問題的后面都有一個“ +”圖標，單擊該圖標后，答案會出現，並且該圖標變為“-”圖標。 問題是，當您單擊下一個問題時，上一個問題的圖標不會切換回原始/上一個/其他圖標。

參見示例：

https://codepen.io/pixelarchitect/pen/eXLEJV

HTML

<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>

<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>

<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>

使用Javascript

$('.faq span').hide();

$('.faq div.question').click(function(e){

  e.preventDefault();

  var $this = $(this).parent().find('span');
  $(".faq span").not($this).hide();
  $this.toggle();

  $(this).find('svg').toggleClass('fa-plus fa-minus')

});

在此示例中，我使用的是jQuery和免費版本的FontAwesome。

Answer 1

使用與顯示/隱藏非常類似的邏輯，您可以將所有svg恢復為加號，但單擊的除外。請參見下文。

 $('.faq span').hide(); $('.faq div.question').click(function(e){ e.preventDefault(); var $this = $(this).parent().find('span'); $(".faq span").not($this).hide(); $this.toggle(); // This line turns all fa-minus into fa-plus except the clicked one $('.faq svg').not($(this).find('svg')).removeClass('fa-minus').addClass('fa-plus'); $(this).find('svg').toggleClass('fa-plus fa-minus'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> <div class="faq"> <div class="question">Q <i class="fas fa-plus"></i></div> <span class="answer">A</span> </div> <div class="faq"> <div class="question">Q <i class="fas fa-plus"></i></div> <span class="answer">A</span> </div> <div class="faq"> <div class="question">Q <i class="fas fa-plus"></i></div> <span class="answer">A</span> </div> 

Answer 2

您可以找到所有字體超贊的svg，並使用.addClass("fa-plus").removeClass("fa-minus") -不包括當前div的父級：

 $('.faq span').hide(); $('.faq div.question').click(function(e) { e.preventDefault(); var div = $(this).parent(); var $this = div.find('span'); $(".faq span").not($this).hide(); $(".faq").not(div).find("svg") .addClass("fa-plus") .removeClass("fa-minus"); $this.toggle(); $(this).find('svg').toggleClass('fa-plus fa-minus') }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> <div class="faq"> <div class="question">Q <i class="fas fa-plus"></i></div> <span class="answer">A</span> </div> <div class="faq"> <div class="question">Q <i class="fas fa-plus"></i></div> <span class="answer">A</span> </div> <div class="faq"> <div class="question">Q <i class="fas fa-plus"></i></div> <span class="answer">A</span> </div> 

更新的Codepen： https ://codepen.io/anon/pen/EMevMz