从面板显示隐藏内容时显示隐藏引导图标

Question

我是JS和jQuery的新手。我试图实现以下目标:当我隐藏面板的内容时，我想使用图标-文件夹关闭图标，当我显示面板的内容时，我想使用图标-文件夹-打开图标。

这是我的观点的一部分(我正在使用Rails)：

<div class="panel panel-warning">
  <div class=panel-heading style="font-weight: bold;">
    <h4 class="panel-title">
      <a data-toggle="collapse" data-parent="#panel" href="#saleitem" class="panel-toggle">
        <span class="glyphicon glyphicon-folder-close"  id="icontoggle"></span>
        Sale Items
      </a>
    </h4>
  </div>

  <div id="saleitem" class="panel-collapse collapse">
     <div class="panel-body">
       <div class="table-responsive">
         <table class="table table-hover table-condensed">
           <thead>

这是我的jQuery：

$(document).ready(function(){
  $('#saleitem').on('show', function () {
    $(".glyphicon-folder-close").removeClass("glyphicon-folder-close").addClass("glyphicon-folder-open");
  });

  $('#saleitem').on('hide', function () {
      $(".glyphicon-folder-open").removeClass("glyphicon-folder-open").addClass("glyphicon-folder-close");
  });
});

提前感谢！

Answer 1

我使用了toggleClass，就像MrYoshiji建议的那样，我没有使用按钮，所以我从http://getbootstrap.com/javascript/#collapse-usage中添加了shown.bs.collapse事件。我还必须在我的span中添加一个类，因为否则我所有的图标图标--文件夹--关闭或图标--文件夹--打开--打开--它们同时打开和关闭。这些帖子也帮了我的忙：绑定到Twitter Bootstrap 3中的崩溃事件 and隐藏并显示事件

这是我的jQuery：

jQuery(function(){
    $('#saleitem').on('shown.bs.collapse', function (){
        $(".glyphiconsales").toggleClass("glyphicon-folder-open")
    })

    $('#saleitem').on('hidden.bs.collapse', function(){
        $(".glyphiconsales").toggleClass("glyphicon-folder-open")
    })
});

Answer 2

尝试下面的代码，或单击这里作为我的演示。

$('.glyphicon').parent().click(function(){
    if(jQuery(this).children('.glyphicon').hasClass('glyphicon-folder-close')){
        jQuery(this).children('.glyphicon').removeClass('glyphicon-folder-close').addClass('glyphicon-folder-open');
    }else if(jQuery(this).children('.glyphicon').hasClass('glyphicon-folder-open')){
        jQuery(this).children('.glyphicon').removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');
    }
});