关于手风琴问题的jQuery toggleClass

Question

所以有这个小的 HTML、JS 和 CSS 来制作一个使用字体真棒图标的小型手风琴。

默认情况下，我们打开了第一个手风琴面板并打开了“fa-minus”图标，而其他的则关闭了“fa-plus”现在我添加的切换会更改您单击的图标，但当然需要在您浏览手风琴时重置默认值并将它们更改为正确的图标。有什么想法吗？

$(document).ready(function($) {
  $('#accordion').find('.panel-heading').click(function() {
    //Expand or collapse this panel
    $(this).next().slideToggle();
    $('.open').parent().removeClass('fa-minus');
    $(this).find('i').toggleClass('fa-plus fa-minus');
    //Hide the other panels
    $(".panel-collapse").not($(this).next()).slideUp();
  });
});

.panel-heading {
  cursor: pointer;
  margin: 0;
}
.panel-heading .status {
  float: right;
}
.panel-collapse {
  display: none;
}
.panel-collapse.open {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">testing 1<i class="status fa fa-minus"></i></h4>
    </div>
    <div class="panel-collapse open">
      <div class="panel-body">
        <div class="form-group">
          <label class="control-label" for="featureTitle2">test 2</label>
          <input type="text" class="form-control" name="featureTitle2" placeholder="Title..." value="<?php echo $featureTitle2 ?>">
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">test 2<i class="status fa fa-plus"></i></h4>
    </div>
    <div class="panel-collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">test 3<i class="status fa fa-plus"></i></h4>
    </div>
    <div class="panel-collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Answer 1

您可以添加一个回调，在 .slideToggle()/.slideUp() 方法完成时触发。

在回调中可以查看手风琴是否隐藏，然后给图标添加对应的类：

$('#accordion .panel-heading').click(function() {
  $(this).next().slideToggle(iconCallback);
  $(".panel-collapse").not($(this).next()).slideUp(iconCallback);

  function iconCallback() {
    var iconClass = $(this).is(':visible') ? 'fa-minus' : 'fa-plus';
    $(this).prev().find('i').removeClass('fa-plus fa-minus').addClass(iconClass);
  }
});

更新示例：

$('#accordion .panel-heading').click(function() {
  $(this).next().slideToggle(iconCallback);
  $(".panel-collapse").not($(this).next()).slideUp(iconCallback);

  function iconCallback() {
    var iconClass = $(this).is(':visible') ? 'fa-minus' : 'fa-plus';
    $(this).prev().find('i').removeClass('fa-plus fa-minus').addClass(iconClass);
  }
});

.panel-heading {
  cursor: pointer;
  margin: 0;
}
.panel-heading .status {
  float: right;
}
.panel-collapse {
  display: none;
}
.panel-collapse.open {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">testing 1<i class="status fa fa-minus"></i></h4>
    </div>
    <div class="panel-collapse open">
      <div class="panel-body">
        <div class="form-group">
          <label class="control-label" for="featureTitle2">test 2</label>
          <input type="text" class="form-control" name="featureTitle2" placeholder="Title..." value="<?php echo $featureTitle2 ?>">
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">test 2<i class="status fa fa-plus"></i></h4>
    </div>
    <div class="panel-collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">test 3<i class="status fa fa-plus"></i></h4>
    </div>
    <div class="panel-collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>