3

jQuery モバイルの折りたたみ可能なセット ウィジェットのスタイルを使用して、通常の折りたたみ可能なものと同じように機能させることはできますか (たとえば、折りたたみ可能なセット内で複数の折りたたみ可能なものを一度に開くことができます)?

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

4

6 に答える 6

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-groupcollapsible-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');

これは、セット内の折りたたみ可能なものをいくつでも好きなだけ行うことができます。ただし、折りたたみ可能なものを何らかの形で特定する必要があります。

私はフォームでこれを行っているので、フォームの障害のあるフォームフィールドから始めて、折りたたみ可能なセットまで進んでいます:

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

頻繁な回答への追加説明:

$('.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');

次の 2 行を追加します。

$( '.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 に答える
0

これは、メインイベントの実行後にイベントの伝播を停止することで実行できます。

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

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

collapsは、セット内のすべての折りたたみ可能オブジェクトに付けるクラスの名前です。次に、1つを開いたり閉じたりしても、残りには影響しません。

于 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 に答える