Question

我正在尝试编写一个通用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的新手，我想知道我的代码是以正确的方式编写还是有更好的方法来编写这样的函数？

Answer 1

由于您正在寻找通用解决方案，因此这应该适用于任何地方：Demo (jsfiddle)

var $togglers = $('[data-toggle="collapse"]');    // Elements that toggle a collapsible
$togglers.each(function() {                       // Do the same thing for all elements
    var $this = $(this);
    var $collapsible = $($this.data('target'));   // Collapsibles of this iteration
    $collapsible.on('hidden', function() {
        var text = $this.data('on-hidden');       // Get the data-on-hidden attribute value
        text && $this.text(text);                 // If it has text to replace, change it
    }).on('shown', function() {
        var text = $this.data('on-active');       // Get the data-on-active attribute value
        text && $this.text(text);                 // If it has text to replace, change it
    });
});

您只需将data-on-hidden和data-on-active属性添加到切换可折叠的任何元素。

注意：我冒昧地切换属性的值，以便 on-hidden 对应隐藏的时间和 on-active 当它可见时。

Twitter Bootstrap的通用JavaScript折叠功能

1 个答案: