當面板顯示隱藏內容時顯示隱藏引導圖形

我是JS和jQuery的新手。我試圖做到以下幾點：當我隱藏面板的內容時，我想使用glyphicon-folder-close圖標，當我顯示面板的內容時，我想使用glyphicon-folder-open圖標。當面板顯示隱藏內容時顯示隱藏引導圖形

這是（我使用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"); 
    }); 
});

提前感謝！

來源

2014-04-09 chch

我不認爲jQuery的觸發所謂的「秀」和「隱藏」的事件時，它顯示/隱藏元素...嘗試使用點擊事件 – MrYoshiji

@railsr真的，我發佈的代碼沒有任何來自我的rails代碼。對不起，標籤。 – chch

@MrYoshiji謝謝，我會嘗試點擊事件。 – chch

我用toggleClass作爲MrYoshiji建議，我沒有使用一個按鈕，雖然讓我從http://getbootstrap.com/javascript/#collapse-usage添加shown.bs.collapse事件。我還要在我的範圍內添加一個班級，因爲否則，我所有的圖形文檔文件夾關閉或圖形文檔文件夾打開，他們同時打開和關閉。此外，這些崗位幫助我： 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") 
    }) 
});

來源

2014-04-09 18:48:52 chch

請嘗試下面的代碼，或點擊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'); 
    } 
});

來源

2014-04-09 17:21:14

當面板顯示隱藏內容時顯示隱藏引導圖形

回答

相關問題