5

私は JQuery Mobile を使用しており、ページにたくさんのアコーディオンがあります。ボタンをクリックするだけで、すべてのアコーディオンを一度に展開/折りたたみたい。これはどのように行うことができますか？

4

4 に答える 4

11

このようなものは機能しますか？

JS

$('#openAll').on('click', function() {
    $('.openMe').each(function() {
        var coll = $(this);
        coll.trigger('expand');
    });
});
$('#closeAll').on('click', function() {
    $('.openMe').each(function() {
        var coll = $(this);
        coll.trigger('collapse'); 
    });
});

代替 JS ( foreach なし):

$('#openAll').on('click', function() {
    $('.openMe').trigger('expand');
});
$('#closeAll').on('click', function() {
    $('.openMe').trigger('collapse');
});

HTML

<div data-role="collapsible" class="openMe">
   <h3>Hello 1</h3>
   <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
<div data-role="collapsible" class="openMe">
   <h3>Hello 2</h3>
   <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
<div data-role="collapsible" class="openMe">
   <h3>Hello 3</h3>
   <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
<br />
<a href="#" data-role="button" id="openAll">Open All Collapsible</a>
<a href="#" data-role="button" id="closeAll">Close All Collapsible</a>
​

ドキュメント:

一度に開くことができるのは1つだけなので、これはセットでは機能しないようです:

ドキュメントを設定:

于 2012-07-03T20:07:31.067 に答える
3

何らかの理由で、上記の解決策がうまくいきません。$('.openMe').trigger('折りたたみ'); および $('.openMe').trigger('expand'); 動かない。

そのため、メソッドを少し書き直しました。

JavaScriptコードは次のようになります

$('#openAll').on('click', function() {
        $(".ui-collapsible-heading").removeClass("ui-collapsible-heading-collapsed");
        $(".ui-collapsible-content").removeClass("ui-collapsible-content-collapsed");
        $(".ui-collapsible-heading a").addClass("ui-icon-minus").removeClass("ui-icon-plus");

});

$('#closeAll').on('click', function() {
        $(".ui-collapsible-heading").addClass("ui-collapsible-heading-collapsed");
        $(".ui-collapsible-content").addClass("ui-collapsible-content-collapsed");
        $(".ui-collapsible-heading a").removeClass("ui-icon-minus").addClass("ui-icon-plus");

});

すなわち; jquery を使用して必要なクラスを追加および削除します。

同じためのjsfiddle

于 2014-05-25T11:13:54.610 に答える