Jquery 用于Twitter引导的通用JavaScript折叠函数

我正在尝试编写一个通用JavaScript，当单击时，它会将可折叠链接从“展开”重命名为“隐藏”，反之亦然

我在jQuery中为此编写了以下代码：

$(".collapse").collapse();

$(".collapse").on('show', function() {
    $("a[data-target='#"+$(this).attr('id')+"']").text($("a[data-target='#"+$(this).attr('id')+"']").attr('data-on-hidden'))
});
$(".collapse").on('hidden', function() {
    $("a[data-target='#"+$(this).attr('id')+"']").text($("a[data-target='#"+$(this).attr('id')+"']").attr('data-on-active'))
});

它与以下HTML交互：

<div class="collapse in" id="collapse-fields">
Expandable content
 </div>
 <a href="#" data-toggle="collapse" data-target="#collapse-fields" 
      data-on-hidden="Hide" data-on-active="Expand">Expand</a>

可扩展内容

---

我是jQuery新手，我想知道我的代码是用正确的方式编写的，还是有更好的方法来编写这样的函数

因为您正在寻找一个通用解决方案，这应该适用于任何地方：

var$togglers=$（'[data toggle=“collapse”]'）；//切换可折叠对象的元素
$togglers.each（function（）{//对所有元素执行相同的操作
var$this=$（this）；
var$collapsable=$（$this.data（'target'））；//此迭代的可折叠文件
$collapsable.on（'hidden'，function（））{
var text=$this.data（'on-hidden'）；//获取隐藏属性值上的数据
text&&$this.text（text）；//如果它有要替换的文本，请更改它
}).on（'显示'，函数（）{
var text=$this.data（'on-active'）；//获取活动属性值上的数据
text&&$this.text（text）；//如果它有要替换的文本，请更改它
});
});

您只需将隐藏属性上的

数据和活动属性上的
数据添加到切换可折叠属性的任何元素

注意：我自由地切换了属性的值，使“打开隐藏”对应于它隐藏的时间，而“打开活动”对应于它可见的时间