2

私は jquery mobile を使用しています。3 つの折りたたみ可能なアイテムを含む折りたたみ可能なセットがあり、展開されたときにアイテムのテーマを JavaScript コードから変更したいと考えています。折りたたんだときに通常のテーマに戻す

注：折りたたみ可能なセットアイテム全体を変更したくありません。折りたたまれたものまたは展開されたものだけです。

4

3 に答える 3

5

残念ながら、collapsibleテーマを動的に変更することはできないため、プログラムでクラスを追加/削除する必要があります。

デモ

jQuery モバイル

$(document).on('expand collapse', '#col1, #col2, #col3', function (e) {
 if (e.type == 'expand') {
    var oldclass = 'ui-btn-up-d ui-body-d';
    var newclass = 'ui-btn-up-e ui-body-e';
    $(this).find('a').removeClass(oldclass + ' ui-btn-hover-d').addClass(newclass + ' ui-btn-hover-e');
    $(this).find('.ui-collapsible-content').removeClass(oldclass).addClass(newclass);
   }
   if (e.type == 'collapse') {
    var oldclass = 'ui-btn-up-e ui-body-e';
    var newclass = 'ui-btn-up-d ui-body-d';
    $(this).find('a').removeClass(oldclass + ' ui-btn-hover-e').addClass(newclass + ' ui-btn-hover-d');
    $(this).find('.ui-collapsible-content').removeClass(oldclass).addClass(newclass);
  }
});

HTML

<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
 <div data-role="collapsible" id="col1">
     <h3>Section 1</h3>

    <p>I'm the collapsible content for section 1</p>
 </div>
 <div data-role="collapsible" id="col2">
     <h3>Section 2</h3>

    <p>I'm the collapsible content for section 2</p>
 </div>
 <div data-role="collapsible" id="col3">
     <h3>Section 3</h3>

    <p>I'm the collapsible content for section 3</p>
 </div>
</div>

関連: https://stackoverflow.com/a/15789387/1771795

于 2013-06-18T18:11:31.480 に答える