Question

我是JS和jQuery的新手。我试图实现以下目标：当我隐藏面板的内容时，我想使用glyphicon-folder-close图标，当我显示面板的内容时，我想使用glyphicon-folder-open图标。< / p>

这是我观点的一部分（我使用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事件。我还要在我的范围内添加一个类，因为否则所有我的glyphicon glyphicon-folder-close或glyphicon glyphicon-folder-open它们同时打开和关闭。这些帖子也帮助了我： Binding to Collapse event in Twitter Bootstrap 3 bootstrap-collapse.js hide and show events

这是我的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

尝试使用以下代码，或点击here的demo。

$('.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');
    }
});

从面板中显示隐藏内容时显示隐藏引导程序glyphicon

2 个答案: