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>

更新的代码笔：https://codepen.io/anon/pen/EMevMz

单击切换类

2 个答案: