关于手风琴问题的jQuery toggleClass

时间：2015-11-30 13:55:42

标签： javascript jquery html css

对于使用字体真棒图标的小型手风琴即时制作，请使用这个小型HTML，JS和CSS。

默认情况下，我们会打开第一个手风琴面板并显示图标＆＃34; fa-minus＆＃34;其他人用＆＃34; fa-plus＆＃34;关闭现在我添加的切换更改了您点击的图标，但当然需要重置默认值并在您通过手风琴时将它们更改为正确的图标。有什么想法吗？

＆＃13;
＆＃13; 
$(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();
  });
});
＆＃13; 
.panel-heading {
  cursor: pointer;
  margin: 0;
}
.panel-heading .status {
  float: right;
}
.panel-collapse {
  display: none;
}
.panel-collapse.open {
  display: block;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题