3

Is it possible to use the style of the Collapsible Set widget from jQuery mobile but have it function like a normal collapsible(e.g. allow more then one collapsible to be open at once within the collapsible set)?

http://jquerymobile.com/demos/1.1.0/docs/content/content-collapsible-set.html

4

6 回答 6

2

是的，这是可能的，但你必须像这样破解你的方式：

$('.YOUR_COLLAPSIBLE_CLASS.ui-collapsible.ui-collapsible-collapsed')
    .attr('data-collapsed',false).removeClass("ui-collapsible-collapsed")
    .find('.ui-collapsible-content').removeClass('ui-collapsible-content-collapsed');

您可以在一组中使用任意数量的可折叠项来执行此操作。不过，您必须以某种方式识别可折叠物品。

我在一个表单中执行此操作，因此我从错误的表单字段开始，并逐步完成可折叠集：

var el = my_faulty_form_field;

el.attr('placeholder', YOUR_ERROR_MSG)
    .closest('.ui-collapsible.ui-collapsible-collapsed')
      .attr('data-collapsed',false).removeClass("ui-collapsible-collapsed")
        .find('.ui-collapsible-content').removeClass('ui-collapsible-content-collapsed');
于 2012-06-08T12:32:34.033 回答
2

另一个使用小技巧但没有任何类属性操作的解决方案是声明一个新的小部件扩展collapsible-set并取消绑定不需要的事件处理程序。

$.widget( "mobile.collapsiblegroup", $.mobile.collapsibleset, {
    options: {
        initSelector: ":jqmData(role='collapsible-group')"
    },
    _create: function() {
        $.mobile.collapsibleset.prototype._create.call(this);
        var $el = this.element;
        if (!$el.jqmData('collapsiblebound2')) {
            $el.jqmData('collapsiblebound2', true)
                .unbind('expand')
                .bind('expand', $._data($el.get(0), 'events')['collapse'][0]);
        }
    }
});

//auto self-init widgets
$( document ).bind( "pagecreate create", function( e ) {
    $.mobile.collapsiblegroup.prototype.enhanceWithin( e.target );
});

要使用它，只需将data-role改为collapsible-group代替collapsible-set。

注意：这仅适用于 jQuery 1.8+，旧版本更改

$._data($el.get(0), 'events')至$el.data('events')

于 2012-10-18T13:03:02.207 回答
2

对频繁回答的补充说明：

$('.YOUR_COLLAPSIBLE_CLASS.ui-collapsible.ui-collapsible-collapsed')
    .attr('data-collapsed',false).removeClass("ui-collapsible-collapsed")
    .find('.ui-collapsible-content').removeClass('ui-collapsible-content-collapsed');

我添加了这两行：

$( '.YOUR_COLLAPSIBLE_CLASS h2' ).removeClass( 'ui-collapsible-heading-collapsed' );
$( '.YOUR_COLLAPSIBLE_CLASS h2 a' ).removeClass( 'ui-icon-plus' ).addClass( 'ui-icon-minus' );
于 2014-12-01T07:22:29.580 回答
1

您可以使用Collapsibles而不是 Collapsible Set 或 Accordion。

与“可折叠集”的不同之处在于可以一次打开多个可折叠行。

于 2013-07-11T14:42:56.143 回答
0

这可以通过在主事件完成后停止事件传播来完成。

$('.collaps').bind('expand', function (evt) {
  evt.stopImmediatePropagation();
})

$('.collaps').bind('collapse', function (evt) {
  evt.stopImmediatePropagation();
});

collaps 是您赋予集合中所有可折叠项的类的名称。然后打开和关闭一个不影响其余的。

于 2012-06-13T12:31:15.507 回答
0

感谢您的解决方案 - 尽管我必须进行一些小改动才能使其正常工作：

stopImmediatePropagation停止任何要执行的处理程序，因此没有任何扩展或折叠。

使用stopPropagation();为我完成了这项工作：

$('.collaps').bind('expand', function (evt) {
  evt.stopPropagation();
});

$('.collaps').bind('collapse', function (evt) {
  evt.stopPropagation();
});
于 2012-07-27T13:18:18.147 回答