当面板显示隐藏内容时显示隐藏引导图形

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

当面板显示隐藏内容时显示隐藏引导图形

回答

相关问题